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 相关文章推荐
超级简单的发送邮件程序
Oct 09 PHP
繁体中文转换为简体中文的PHP函数
Oct 09 PHP
解析ajax事件的调用顺序
Jun 17 PHP
php设计模式之单例、多例设计模式的应用分析
Jun 30 PHP
PHP中数组定义的几种方法
Sep 01 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
Dec 16 PHP
js+php实现静态页面实时调用用户登陆状态的方法
Jan 04 PHP
php数组键值用法实例分析
Feb 27 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
Mar 30 PHP
PHP登录验证码的实现与使用方法
Jul 07 PHP
Laravel validate error处理,ajax,json示例
Oct 25 PHP
php经典趣味算法实例代码
Jan 21 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
漂亮但不安全的CTB
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Python虚拟环境项目实例
2017/11/20 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
应用数学自荐书范文
2013/11/24 职场文书
计划生育标语
2014/06/23 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
三八妇女节主持词
2015/07/04 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers