需求效果一行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. BZOJ2773 : ispiti

    首先询问i相当于询问a[j]>=a[i],b[j]>=b[i]的j 如果b[j]==b[i],那么a[j]>a[i],这种情况先用set处理掉 如果b[j]>b[i],那么a[ ...

  2. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了！像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  3. 添加 Windows 8.1 无虚拟机启动项 解决极品飞车的不支持虚拟机报错

    在Windows 8.1 64位环境下,安装完极品飞车17后,运行程序会出现错误对话框: Sorry, this application cannot run under a Virual Machi ...

  4. 【BZOJ】1834: [ZJOI2010]network 网络扩容（最大流+费用流）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1834 我又思考人生了T_T,nd的数组开小了,一直wa,调了一个小时才发现啊!!!!!我一直以为我的 ...

  5. 利用onekeyup即可实现验证码的点击刷新功能

    显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...

  6. SQL中批量删除被注入的恶意代码的方法

    下文将为您介绍SQL中批量删除被注入的恶意代码的方法,供您参考,如果您也遇到了这样的问题,不妨一看,相信对您会有所帮助. 1,如果你的数据表很少的话,那么写几条简单的sql就搞定了 对于表中的nvch ...

  7. 为什么java里用常量赋值就相等，用字符串就不等？

    例一: String s0="HF"; String s1=new String("HF"); System.out.println(s0==s1); 输入为什 ...

  8. MAC 环境 ionic build android 命令在"Downloading http://services.gradle.org/distributions/gradle-2.13-all.zip"卡住问题

    如题: 环境 node: 4.5.0,npm:2.15.9,cordova :6.3.1, ionic:2.1.0 在ionic build android 命令执行时,会去这个网址下载 gradel ...

  9. iOS segue 跳转

    场景描述: 要实现在tableViewController 的界面A里,点击一个cell ,跳转到第二个viewController的界面B .在第二个界面里做相应操作. 我的做法,利用sb,在A 里 ...

  10. java.sql.SQLException: 关闭的连接 解决办法

    程序如果长时间不进行数据库操作,那么数据源中的 Connection 很可能已经断开.其原因有可能是防火墙,或者连接的数据库设置的超时时间.这里使用的是 C3P0 连接 oracle 数据库,引起的异 ...