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脚本的10个技巧(3)
Oct 09 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
Mar 16 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
Apr 12 PHP
php 各种应用乱码问题的解决方法
May 09 PHP
php 中英文语言转换类
Sep 07 PHP
php全排列递归算法代码
Oct 09 PHP
php动态生成函数示例
Mar 21 PHP
php页码形式分页函数支持静态化地址及ajax分页
Mar 28 PHP
ThinkPHP实例化模型的四种方法概述
Aug 22 PHP
PHP中实现获取IP和地理位置类分享
Feb 10 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
Jul 08 PHP
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
Mar 29 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设计模式  Command(命令模式)
2011/06/17 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
python元组操作实例解析
2014/09/23 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
python中正则的使用指南
2016/12/04 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python中dict使用方法详解
2019/07/17 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
pygame实现成语填空游戏
2019/10/29 Python
python读取mysql数据绘制条形图
2020/03/25 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
个人求职信范文分享
2014/01/06 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
酒店员工培训方案
2014/06/02 职场文书
校庆标语集锦
2014/06/25 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js