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的安全
Oct 09 PHP
PHP实现多条件查询实例代码
Jul 17 PHP
有关phpmailer的详细介绍及使用方法
Jan 28 PHP
PHP和.net中des加解密的实现方法
Feb 27 PHP
php文件上传的简单实例
Oct 19 PHP
php json转换成数组形式代码分享
Nov 10 PHP
php中getservbyport与getservbyname函数用法实例
Nov 18 PHP
PHP 使用memcached简单示例分享
Mar 05 PHP
php自定义截取中文字符串-utf8版
Feb 27 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
Mar 10 PHP
PHP实现非阻塞模式的方法分析
Jul 26 PHP
Laravel-添加后台模板AdminLte的实现方法
Oct 08 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP开发框架总结收藏
2008/04/24 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
用javascript实现自定义标签
2007/05/08 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
python批量提取word内信息
2015/08/09 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
关键字final的用法
2013/10/02 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
给导游的表扬信
2014/01/10 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL