京东区块排版负margin用法

时间：2021-12-21 05:21:00
 <!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. &lbrack;转&rsqb;关于负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. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  2. php手册杂记

    1, strcmp()是比较两个字符串的大小,两个字符串相同时返回0,第一个字符串大于第二个字符串时返回一个正值,否则返回负值.比较两个字符串的算法是:逐个比较两个串中对应的字符,字符大小按照ASCI ...

  3. 关于JS、JQuery、CSS的小知识点

    1.将字符串转换成json列表格式如下: var getaddress = appcan.libuser.getAddress(); var address=JSON.parse(getaddress ...

  4. ASP&period;NET MVC 5 学习教程：数据迁移之添加字段

    原文 ASP.NET MVC 5 学习教程:数据迁移之添加字段 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符 ...

  5. 【免费讲座IX算法第一阶段】转专业找CS工作&OpenCurlyDoubleQuote;打狗棒法”

    个人经验CS不相干,如何收拾简历?如何获取知识,在最短的时间内找到一份工作需要?如何避免盲目刷称号,迅速制定学习计划?如何准备面试? 星期五.九算法黄蓉老师受邀嘉宾 [在线共享] 她成功转专业的六个月 ...

  6. Mac OS X 在捕捉AppLAN通信包

    Mac OS X 在捕捉AppLAN通信包 一.拍摄模式 由于工作关系.经常要分析App wifi通讯协议.我的开发电脑是Mac Book. 大体有例如以下几种模式: + App与server进行ht ...

  7. HBase全分布安装配置

    分布式的hbase依赖于Zookeeper集群所有正常工作节点都必须能够访问zookeeper:用户可以通过启动和关闭脚本就可以把zookeeper当做hbase的一部分来启动和关闭进程:当然,用户也 ...

  8. leetcode-006 detect cycle

    package leetcode; public class DetectCycle { public ListNode detectCycle(ListNode head) { ListNode s ...

  9. svg-写一个简单的进度条

    html <div class="container"> <div class="line-wrap"> <svg version ...

  10. BZOJ 3265&colon; 志愿者招募加强版 &lbrack;单纯形法&rsqb;

    传送门 一个人多段区间,一样.... 不过国家队论文上说这道题好像不能保证整数解.... #include <iostream> #include <cstdio> #incl ...

相关文章