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 和 XML: 使用expat函数(二)
Oct 09 PHP
PHP对象转换为数组函数(递归方法)
Feb 04 PHP
PHP $_FILES中error返回值详解
Jan 30 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
Apr 30 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
Aug 25 PHP
PHP中常用的字符串格式化函数总结
Nov 19 PHP
php 问卷调查结果统计
Oct 08 PHP
弹出模态框modal的实现方法及实例
Sep 19 PHP
php二维码生成以及下载实现
Sep 28 PHP
ThinkPHP5框架缓存查询操作分析
May 30 PHP
php+js实现裁剪任意形状图片
Oct 31 PHP
PHP如何将图片文件上传到另外一台服务器上
Aug 26 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运算符的知识大全
2011/11/03 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
python实现爬虫下载漫画示例
2014/02/16 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
linux面试题参考答案(8)
2015/08/11 面试题
大专生自荐信
2013/10/04 职场文书
毕业生精彩的自我评价分享
2013/10/06 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
劳模事迹材料范文
2014/12/24 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL