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 session有效期问题
Apr 26 PHP
php echo()和print()、require()和include()函数区别说明
Mar 27 PHP
php实现MD5加密16位(不要默认的32位)
Aug 12 PHP
php实现邮件发送并带有附件
Jan 24 PHP
在Win7 中为php扩展配置Xcache
Oct 08 PHP
PHP中file_exists()判断中文文件名无效的解决方法
Nov 12 PHP
PHP获取数组最后一个值的2种方法
Jan 21 PHP
php从完整文件路径中分离文件目录和文件名的方法
Mar 13 PHP
php将图片文件转换成二进制输出的方法
Jun 10 PHP
PHP预定义变量9大超全局数组用法详解
Apr 23 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
Jun 30 PHP
PHP whois查询类定义与用法示例
Apr 03 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 curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue检测对象和数组的变化分析
2018/06/30 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
详解Python中的多线程编程
2015/04/09 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python实现顺序表的简单代码
2018/09/28 Python
python递归下载文件夹下所有文件
2019/08/31 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
python怎么判断模块安装完成
2020/06/19 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
社区义诊活动总结
2014/04/30 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
详解Python函数print用法
2021/06/18 Python