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 木马攻击防御技巧
Jun 13 PHP
PHP仿盗链代码
Jun 03 PHP
php导入导出excel实例
Oct 25 PHP
php fsockopen解决办法 php实现多线程
Jan 20 PHP
zf框架的zend_cache缓存使用方法(zend框架)
Mar 14 PHP
php+ajax实时输入自动搜索匹配的方法
Dec 26 PHP
php实现将字符串按照指定距离进行分割的方法
Mar 14 PHP
php计算一个文件大小的方法
Mar 30 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
Jul 29 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
Dec 24 PHP
Mac系统下安装PHP Xdebug
Mar 30 PHP
Yii支持多域名cors原理的实现
Dec 05 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
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
用ADODB.Stream转换
2007/01/22 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
bootstrap table小案例
2016/10/21 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
python中pass语句用法实例分析
2015/04/30 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
九年级政治教学反思
2014/02/06 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL