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中比较简单的导入phpmyadmin生成的sql文件的方法
Jun 28 PHP
解析yii数据库的增删查改
Jun 20 PHP
php字符编码转换之gb2312转为utf8
Oct 28 PHP
wordpress自定义url参数实现路由功能的代码示例
Nov 28 PHP
thinkphp实现面包屑导航(当前位置)例子分享
May 10 PHP
php程序内部post数据的方法
Mar 31 PHP
yii2利用自带UploadedFile实现上传图片的示例
Feb 16 PHP
php取出数组单个值的方法
Mar 12 PHP
thinkPHP框架实现的短信接口验证码功能示例
Jun 20 PHP
PHP7.3.10编译安装教程
Oct 08 PHP
thinkphp5使html5实现动态跳转的例子
Oct 16 PHP
php的RSA加密解密算法原理与用法分析
Jan 23 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实现的登录,注册及密码修改功能分析
2016/11/25 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
js倒计时抢购实例
2015/12/20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
详解python中init方法和随机数方法
2019/03/13 Python
详解python配置虚拟环境
2019/04/08 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
如何清空Session
2015/02/23 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
劲霸男装广告词改编版
2014/03/21 职场文书
银行求职自荐书
2014/06/25 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
人事聘任通知
2015/04/21 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis