需求效果一行3栏：

场景模拟：同事给了我这么一段静态代码如下:

<!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>

可是动态读取是统一的呀？宽度不够咋办捏？错误的换行效果并不是我们想要的!

解决方案一：样式加宽隐藏

<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判断，清除最右栏边距

    <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动态读取数据清除最右边距的更多相关文章

  1. Highcharts使用简例 + 异步动态读取数据

    第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src= ...

  2. ASP.NET&AJAX&JSON - 动态读取数据

    因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...

  3. TabTopAutoTextSizeLayout【自定义文字字号区域（动态选项卡数据且可滑动）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...

  4. 自己动手之使用反射和泛型，动态读取XML创建类实例并赋值

    前言: 最近小匹夫参与的游戏项目到了需要读取数据的阶段了,那么觉得自己业余时间也该实践下数据相关的内容.那么从哪入手呢?因为用的是Unity3d的游戏引擎,思来想去就选择了C#读取XML文件这个小功能 ...

  5. Unity3D移动平台动态读取外部文件全解析

    前言: 一直有个想法,就是把工作中遇到的坑通过自己的深挖,总结成一套相同问题的解决方案供各位同行拍砖探讨.眼瞅着2015年第一个工作日就要来到了,小匹夫也休息的差不多了,寻思着也该写点东西活动活动大脑 ...

  6. 用EXCEL内嵌的Visual Basic for Application 编程，通过 UGSimple USB-GPIB 控制器来驱动仪器34401A，并从34401A读取数据

    现在市场上有很多中USB-GPIB 控制器,或叫 USB 转GPIB链接线. 每种GPIB控制器都有它的 函数库(dll库).各种GPIB 控制器的价钱插别很大.这里以一种价钱较便宜的USB-GPIB ...

  7. 使用CHttpFile从服务器端正确的读取数据

    前段时间在给软件做升级提示模块的时候发现一个问题,就是使用CHttpFile对象无法从服务器端获取到正确的响应数据长度,无论是使用CHttpFile:: QueryInfo方法,还是使用CHttpFi ...

  8. 【转】基本数据持久性(一) 使用plist保存和读取数据

    原文网址:http://www.it165.net/pro/html/201309/7170.html 想保存成绩.记录得分.保存账号密码等等?数据持久性可以做到这一点!这篇文章通过简单的程序,来分享 ...

  9. C#下如何用NPlot绘制期货股票K线图(2):读取数据文件让K线图自动更新

    [内容介绍]上一篇介绍了K线图的基本绘制方法,但很不完善,本篇增加了它直接读取数据的功能,这对于金融市场的数据量大且又需要动态刷新功能的实现很重要. [实现方法] 1.需要一个数据文件,这里用的是直接 ...

随机推荐

  1. unity button

    #pragma strict var buttonTexture:Texture2D; private var str:String; private var frameTime:int; funct ...

  2. velocity 判断 变量 是否不是空或empty

    原先的 #if($mobile) 这种写法是不准确的 ,请换成 "$!{ mobile}"!="" 说明 :    #if($mobile)   这种写法 只能 ...

  3. SecureCrt自动化

    Crt自动化 测试 SecureCrt脚本 JS脚本   引言 软件介绍 脚本介绍 引言 在嵌入式公司中,面对大量的网络设备,不论开发同事进行设备开发.测试同事进行大量测试工作还是运维人员进行大量设备 ...

  4. 用LinqPad查看Nhibernate生成的sql语句

    使用Nhibernate开发一般都要对Nhibernate生成的sql语句进行查看及分析,查看Nhibernate生成的sql语句,可以使用NHProfiler和log4net.但NHProfiler ...

  5. Quartz将Job保存在数据库中所需表的说明

    http://blog.iqbon.com/doc/364.html   (将Quartz持久化到数据库的做法)   QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calen ...

  6. 【C语言】11-指针

    直接引用 1. 回想一下,之前我们是如何更改某个变量的值? 我们之前是通过变量名来直接引用变量,然后进行赋值: char a; a = 10;   2. 看上去是很简单,其实程序内部是怎么操作的呢? ...

  7. ITK 3.20.1 VS2010 Configuration 配置

    Download ITK 3.20.1 Download VS2010 Download CMake 3.2.0 I assume you've already installed VS2010 an ...

  8. php pdo分页

    <table width="95%" border="1" cellspacing="0" cellpadding="0&q ...

  9. pdf转能编辑的word的方法

    方法一:用汉王ocr文字识别软件,扫描文字,一页一页扫描,复制粘贴 方法二:将pdf文件拷贝到没有pdf阅读器的电脑上,同时你的office是2013,用word打开你的pdf文档,根据他的提示操作, ...

  10. win95+ie3-win10+ie11 浏览器执行漏洞

    alliedve.htm <!doctype html><html><meta http-equiv="X-UA-Compatible" conten ...