相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同。

大概就是上面这个样子,下面介绍几种实现的方式。

1.负margin大法

设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度

<style type="text/css">

*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}

ul>li{
float: left;
}

ul>li>img{
width: 100%;
}

.test1{
padding: 0 2%;
margin-left: -3.3%;
}

.test1>li{
width: 30%;
margin-left: 3.3%;
}

</style>

<p>1.关于负margin的实现,由于margin是基于父级计算的,会有一定的偏差,但是用于移动端上,误差可以忽略不计</p>
<ul class="test1 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>

上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的,但是在移动端上因为视窗的范围有限,这个差别很小,在pc上一般使用px,所以可以忽略不计。(下面还有更多的办法)

2.各大网站的实现,在元素内部进行填充,使用box-sizing,需要ie8及以上才支持

<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between; }
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>2.各大网站的实现,在元素内部进行填充,使用box-sizing,需要ie8及以上才支持</p>
<ul class="test2 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>

这种实现暂时还没发现什么缺点,代码也简单易懂(推荐)

3.弹性盒模型flex的实现,需要做兼容处理(旧盒子+新盒子)

<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between; }
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>3.弹性盒模型flex的实现,需要做兼容处理(旧盒子+新盒子),仅为演示,没做兼容处理</p>
<ul class="test3">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>

这种情况怎么能少了我们flex呢,弹性盒模型应该是专门用来处理这种情况吧,但是又有新旧盒子模型之分,各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。(喜欢折腾就上吧,效果棒棒的)

4.classname实现

将需要特殊处理的元素加上单独的class,再做相应的处理。可以后台进行处理也可以前端处理(推荐后台处理)

<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between; }
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>4.classname实现</p>
<ul class="test4 clearfix">
<li class="first"><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>

5.css选择器实现

:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点,大家可以去查阅一下css文档,注意一下兼容性没问题了

<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between; }
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>5.css选择器实现(注意ie兼容性)</p>
<ul class="test5 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>

贴上全部的DEMO

差点忘了还有一种情况X=2时,设置好width,左边左浮动,右边右浮动。

其实X=3时,还有一种处理方式,左右元素分别左右浮动,中间元素相对于父级设置绝对定位,居中定位。

注意由于不能整除的原因,不能像box-sizing那样完美的计算,但是合理的应用在项目上完全没问题。

个人思路毕竟有限,如果大家还有什么其他方案,欢迎留言。

css布局之负margin妙用及其他实现的更多相关文章

  1. CSS艺术之---负margin之美

    CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...

  2. web前端教程:CSS 布局十八般武艺都在这里了

      CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...

  3. CSS布局十八般武艺都在这里了

    CSS布局十八般武艺都在这里了 Shelley Lee 4 个月前 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式 ...

  4. CSS布局和居中常用技巧

    1.常用居中方法 居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中: <div class="parent"> <div class=&qu ...

  5. CSS布局整理

    目录 常用居中方法 水平居中 垂直居中 单列布局 二列&三列布局 float+margin position+margin 圣杯布局(float+负margin) 双飞翼布局(float+负m ...

  6. CSS布局基础

    (初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...

  7. CSS布局(圣杯、双飞翼、flex)

    圣杯布局(float + 负margin + padding + position) <!DOCTYPE html> <html> <head> <meta ...

  8. (转)CSS布局-负边距-margin

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  9. 负margin在布局中的运用(*****************************************************************)

    一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

随机推荐

  1. 你真的了解console吗?

    对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试.最常用的语句就是console.log(expres ...

  2. document.all和jq trigger原理

    document.all是页面内所有元素的一个集合.如:       document.all(0)表示页面内第一个元素document.all可以判断浏览器是否是IE     if(document ...

  3. Delphi-Concat 函数

    函数名称 Concat 所在单元 System 函数原型 function Concat ( const String1 {,String2 ...} : string ) : string; 函数功 ...

  4. 如何将github上的微信客户端类库能够通过composer工具下载

    我将自己开发的微信客户端类库放到了github上面去了. 然后我在我的项目里面添加了一个composer.json文件 内容如下 { "require": { "weix ...

  5. JavaScript注意事项

    var m = "false"; Boolean(m); // true而非 false ajax不能设置setRequestHeaders("Cookie", ...

  6. Multiplication Table

    CF#256D:http://codeforces.com/contest/448/problem/D 题意:给你一个n*m的表格,第i行第j列的数据是i*j,然后询问第k小的数,这里的排序是不去重的 ...

  7. [Android] createTrack_l

    在分析AudioTrack的时候,第一步会new AudioTrack,并调用他的set方法.在set方法的最后调用了createTrack_l创建音轨.我们现在来分析createTrack_l的流程 ...

  8. ISO7816 传输协议 T0 T1

    T=0协议不能用一条命令来实现,必须分为两步实现:第一条命令为卡片提供数据,然后用另外一条相关的命令来取回数据.这样给卡片的编程带来很大麻烦,同时卡片内存中必须保留上一次操作需要返回的数据.这时如果不 ...

  9. 初识DSP

    初识DSP 1.TI DSP的选型主要考虑处理速度.功耗.程序存储器和数据存储器的容量.片内的资源,如定时器的数量.I/O口数量.中断数量.DMA通道数等.DSP的主要供应商有TI,ADI,Motor ...

  10. 王学长的LCT标程

    善良的王学长竟然亲自打了一遍QAQ好感动QAQ #include<iostream> #include<cstdio> #include<cmath> #inclu ...