php动态读取数据清除最右边距的方法


Posted in PHP onApril 12, 2017

需求效果一行3栏:

php动态读取数据清除最右边距的方法

场景模拟:同事给了我这么一段静态代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  li,ul{padding: 0;margin:0;list-style: none;}
  .box{
    width:1000px;background: #ddd;height:500px;
  }
  .box li{margin:0 50px 20px 0;background:red;height:30px;width:300px;float: left;}
</style>
<body>
  <div class="box">    
    <ul>
      <?php
      for($i=0;$i<9;$i++){
          echo '<li></li>';
      }
      ?>
    </ul>
  </div>
</body>
</html>

可是动态读取是统一的呀?宽度不够咋办捏?错误的换行效果并不是我们想要的!

php动态读取数据清除最右边距的方法

解决方案一:样式加宽隐藏

<style>
  li,ul{padding: 0;margin:0;list-style: none;}
  .box{
    width:1000px;background: #ddd;height:500px;overflow: hidden;
  }
  .box ul{width: 1200px;}
  .box li{margin:0 50px 20px 0;background:red;height:30px;width:300px;float: left;}
</style>

预览正常:

php动态读取数据清除最右边距的方法

解决方案二:php判断,清除最右栏边距

<div class="box">    
    <ul>
      <?php
      //列数
      $col=3;
      for($i=0;$i<9;$i++){
        $margin_r = (($i%$col)==($col-1))?"margin-right:0;":"";//清除每行最右侧宝贝右边距
          echo '<li style="'.$margin_r.'">'.$i%$col.'</li>';
      }
      ?>
    </ul>
  </div>

php动态读取数据清除最右边距的方法

方案一和方案二都是可以实现一样的效果!

以上这篇php动态读取数据清除最右边距的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
虚拟主机中对PHP的特殊设置
Oct 09 PHP
php下检测字符串是否是utf8编码的代码
Jun 28 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
Jun 21 PHP
自定义session存储机制避免会话保持问题
Oct 08 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
May 13 PHP
Yii调试查看执行SQL语句的方法
Jul 15 PHP
php安装ssh2扩展的方法【Linux平台】
Jul 20 PHP
PHP生成word文档的三种实现方式
Nov 14 PHP
PHP手机号中间四位用星号*代替显示的实例
Jun 02 PHP
阿里云PHP SMS短信服务验证码发送方法
Jul 11 PHP
关于Laravel参数验证的一些疑与惑
Nov 19 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
Dec 12 PHP
详解使用php调用微信接口上传永久素材
Apr 11 #PHP
php array_reverse 以相反的顺序返回数组实例代码
Apr 11 #PHP
PHP和MYSQL实现分页导航思路详解
Apr 11 #PHP
php 一维数组的循环遍历实现代码
Apr 10 #PHP
删除PHP数组中的重复元素的实现代码
Apr 10 #PHP
删除PHP数组中头部、尾部、任意元素的实现代码
Apr 10 #PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
Apr 10 #PHP
You might like
php通过文件流方式复制文件的方法
2015/03/13 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
使用正则替换变量
2007/05/05 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
浅析Ajax语法
2016/12/05 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python实现处理管道的方法
2015/06/04 Python
如何基于Python实现自动扫雷
2020/01/06 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
幼儿园毕业教师感言
2014/02/21 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
护士毕业实习感言
2014/03/05 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书