<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>京东区块排版负margin用法</title>

     <style>

         *{margin:0;padding:0}

         .wrap{

             margin-top: 10px;

             overflow: hidden;

             clear: both;

             width: 990px;

             margin: 0 auto;

         }

         .ul{

             background:#f0f;

             overflow: hidden;

             margin-left:-10px;

         }

         li{

             float: left;

             padding: 15px 0px 25px 0px;

             width: 240px;

             overflow: hidden;

             background-color: #f45;

             margin-bottom: 10px;

             margin-left: 10px;

         }

         .demo{width:990px;height:20px;background: black;margin: 0 auto;

         }

     </style>

 </head>

 <body>

 <div class="wrap">

     <ul class="ul">

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

 </div>

 </body>

 </html>

主要是ul的设置，两点1、不能设置宽度2、负margin等于margin-left的值；

每个li的宽度计算方法等于li.width = （warp.width+margin-left）/li的个数-margin-left;

京东区块排版负margin用法的更多相关文章

  1. 负margin的原理及应用

    在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...

  2. 负margin的移位参考线

    同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...

  3. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  4. 负margin小记

    static元素  margin-top/left负值,元素向指定方向移动,               margin-bottom/right负值,元素不动,后续元素前移 float元素   左浮, ...

  5. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  6. 负margin一些奇葩的布局技巧

    copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...

  7. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

  8. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  9. 负margin新解

    第一篇 我知道你不知道的负Margin 分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/i-know-you-do-not-know ...

随机推荐

  1. HeadFirst设计模式读书笔记(4)-工厂模式

    工厂方法模式:定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类. 所有工厂模式都用来封装对象的创建.工厂方法模式通过让子类决定该创建的对象是什么,来达到将对象 ...

  2. Qt5 基于TCP传输的发送/接收文件服务器（支持多客户端）

    一.实现功能 1.服务器端选择待发送的文件,可以是多个 2.开启服务器,支持多客户端接入,能够实时显示每个客户端接入状态 3.等待所有客户端都处于已连接状态时,依次发送文件集给每个客户端,显示每个客户 ...

  3. POJ-1088 Skiing(记忆化搜索）

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  4. hdu 1050 Moving Tables_贪心

    题意:你搬n个桌子,桌子从一个地方搬到另一个地方,走廊只允许同时一个桌子通过,教室分布在两边,奇数在一边,偶数在一边,当桌子不冲突时可以同时搬运,冲突时要等别的那个桌子搬完再搬. 思路:因为奇数桌子在 ...

  5. hdu 4619 Warm up 2_最大独立集

    三个人整个下午都想不出这题 后来看题解,竟然用匈牙利算法的最大独立集,我顿时晕了. 题意:给竖着和横着的方块,除去重叠的,最多能留下几个方块 #include <cstdlib> #inc ...

  6. qq视频api代码

    <!--视频容器--> <div id="mod_player"></div>   <!--腾讯视频代码开始--> <scri ...

  7. Android分析第三方应用layout的神器

    hierarchyviewer.bat或者monitor.bat一直都是分析layout的神器,只是.非常多时候不好用,连不上真机,害的我不得不使用模拟器来分析layout. 今天发现了另外一个神器. ...

  8. 好用的DNS服务器推荐

    DNS在平时上网中扮演重要角色,如果不注意DNS的话,可能会导致网速慢.弹窗广告.网址打不开.打开不是自己想要的网站.淘宝客劫持等一系列问题.针对DNS的问题,网络上也有各种DNS平台供用户选择.这里 ...

  9. Applet 数字签名技术全然攻略

      在这里先对大家说声对不起,毕竟2年前就想写这篇文章,但由于自己太懒惰一直没有写,也是为了给自己留点东西好了,前些日子我老大让我又搞这个东西发现我曾经的资料没留,又凭着自己印象从新来过,但发现网上写 ...

  10. linux下的DNS

    Linux下设置DNS的位置主要是, 1网卡设置配置文件里面DNS服务器地址设置;2 hosts文件指定 3.系统默认DNS服务器地址设置/etc/resolv.conf文件修改 生效顺序是: 1 h ...