<!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. 将文件放到Android模拟器的SD卡中的两种解决方法

    两种方式:一.窗口界面操作1.打开DDMS页面2.打开File Explorer页,如果没有,在Window --> Show View -->File Explorer3.一般就在mnt ...

  2. 2.2.2 胸腰差和胸臀差的应用_米人NOONE_新浪博客

    2.2.2  胸腰差和胸臀差的应用_米人NOONE_新浪博客 腰差和胸臀差的应用(2009-06-16 19:24:57)转载▼标签:校园         前面已经对这两个概念作了简单的讲解.这两个概 ...

  3. optics matlab实现

    关于optics算法的一些基本概念,在此一一忽略. 先求得所有节点的核心距离,用cd矩阵表示: 然后对每个节点进行处理,这个时候不需要考虑该节点是不是核心对象,按顺序取节点,如果该拓展点是核心对象,处 ...

  4. vs2010中看不见类视图和资源视图的解决方法

    vs2010工程中,因为删除了“vcxproj.filter”文件,所以导致资源视图看不见了. 解决方法是:先关掉工程,将工程对应的扩展名为.suo和.sdf删除,重新打开解决方案,问题解决.

  5. Unity FixedUpdate 与 Update 的线程关系实验

    先上结论:FixedUpdate 与 Update 在同一个线程上. 实验过程: 1.打印 FixedUpdate 和 Update 的线程编号 void FixedUpdate () { Debug ...

  6. 天气情况（思维，dp思想）

    天气情况 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. ASP.NET State Service

    本文来自:http://www.cnblogs.com/jhxk/articles/1648194.html 这一段就是配置应用程序是如何存储Session信息的了.我们以下的各种操作主要是针对这一段 ...

  8. UVA11387 - The 3-Regular Graph（推理）

    题目链接 题意:给n个点,问能否画出一个无向图.且每一个顶点连接3条边.假设能够的话输出连接的边. 思路:当添加一条边时,总的无向图的度数会添加2,所以度数之和n*2为偶数.当n为奇数时,度数之和为奇 ...

  9. mongodb 学习笔记 04 -- 游标、索引

    游标 var cursor = db.collectionName.find() 创建游标 cursor.hasNext() 是否有下一个元素 cursor.next() 取出下一个元素 比如 whi ...

  10. php get_magic_quotes_gpc() addslashes()

    最近学了学PHP,看到这段代码 function daddslashes($str){       return (!get_magic_quotes_gpc())?addslashes($str): ...