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 相关文章推荐
PHP5.2下chunk_split()函数整数溢出漏洞 分析
Jun 06 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
Jun 03 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
Jul 01 PHP
PHP获取网页标题的3种实现方法代码实例
Apr 11 PHP
PHP函数eval()介绍和使用示例
Aug 20 PHP
PHP模拟asp中response类实现方法
Aug 08 PHP
php判断用户是否关注微信公众号
Jul 22 PHP
PHP缩略图生成和图片水印制作
Jan 07 PHP
php实现产品加入购物车功能(1)
Jul 23 PHP
PHP开发之用微信远程遥控服务器
Jan 25 PHP
laravel 如何实现引入自己的函数或类库
Oct 15 PHP
Laravel的加密解密与哈希实例讲解
Mar 24 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公用函数列表[正则]
2007/02/22 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python日志模块logbook使用方法
2019/09/19 Python
python 经典数字滤波实例
2019/12/16 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
新手学python应该下哪个版本
2020/06/11 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
保密普查工作实施方案
2014/02/25 职场文书
精神文明单位申报材料
2014/05/02 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript