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 中dirname(_file_)讲解
Mar 18 PHP
php empty()与isset()区别的详细介绍
Jun 17 PHP
使用Sphinx对索引进行搜索
Jun 25 PHP
PHP简单实现“相关文章推荐”功能的方法
Jul 19 PHP
set_exception_handler函数在ThinkPHP中的用法
Oct 31 PHP
php中数据库连接方式pdo和mysqli对比分析
Feb 25 PHP
如何把php5.3版本升级到php5.4或者php5.5
Jul 31 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
Apr 07 PHP
PHP简单实现合并2个数字键数组值的方法
May 30 PHP
PHP回调函数与匿名函数实例详解
Aug 16 PHP
yii2.0整合阿里云oss上传单个文件的示例
Sep 19 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
Mar 29 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
URL Rewrite的设置方法
2007/01/02 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python通过opencv实现批量剪切图片
2017/11/13 Python
django实现用户登陆功能详解
2017/12/11 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
代办出身证明书
2014/10/21 职场文书
色戒观后感
2015/06/12 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python