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的配置文件php.ini
Oct 09 PHP
php xml 入门学习资料
Jan 01 PHP
WordPress判断用户是否登录的代码
Mar 17 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
Jun 17 PHP
关于Zend Studio 配色方案插件的介绍
Jun 24 PHP
zend optimizer在wamp的基础上安装图文教程
Oct 26 PHP
使用YUI+Ant 实现JS CSS压缩
Sep 02 PHP
php限制ip地址范围的方法
Mar 31 PHP
PHP创建PowerPoint2007文档的方法
Dec 10 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
May 24 PHP
PHP观察者模式示例【Laravel框架中有用到】
Jun 15 PHP
PHP接口类(interface)的定义、特点和应用示例
May 18 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 和 COM
2006/10/09 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
热门专业求职信
2014/05/24 职场文书
小学班级特色活动方案
2014/08/31 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python