需求效果一行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. LMT 装机记录

    老毛桃是一个存在很久的文物了,当年在大学的时候,学习委员还专门做了一个PPT来讲老毛桃,现在想想,有点后悔那是不去试一下. 但万幸的是,最近终于彻底理解了工作流程: 1)安装一个LMT的软件,从其官网 ...

  2. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  3. ural 1269. Obscene Words Filter

    1269. Obscene Words Filter Time limit: 0.5 secondMemory limit: 8 MB There is a problem to check mess ...

  4. BZOJ4361 : isn

    设$f[i]$表示长度为$i$的不下降子序列的个数. 考虑容斥,对于长度为$i$的子序列,如果操作不合法,那么之前一定是一个长度为$i+1$的子序列,所以答案$=\sum_{i=1}^n(f[i]\t ...

  5. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  6. [Unity2D]精灵动画

    通常我们在游戏里面创建的精灵比如玩家主角,它在移动的过程中一般会带有一些动画的效果,比如两只脚前后地移动,那么这种动画效果的实现和控制就可以通过Unity2D的动画系统来实现. 要添加这样的动画,首先 ...

  7. jQuery 写的插件图片上下切换幻灯效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. hdu A计划

    这道题是一道bfs的题目,因为题目中给的数据很小,所以可以采用优先队列的方式来简化处理.这道题在搜索的过程中要注意map1的不同层次的转换,即对'#'的理解.之前wa了两次是因为我考虑了如果上下两层对 ...

  9. Grunt - grunt-contrib-connect

    快速搭建本地化服务 推荐加强版 : http://www.cnblogs.com/CyLee/p/5331055.html 首先要安装全局的grunt-cli sudo npm install gru ...

  10. 【液晶模块系列基础视频】3.2fatfs接口函数的使用2

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...