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

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

1.负margin大法

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

CSS Code复制内容到剪贴板 <styletype="text/css"> *{ margin:0; padding:0; } img{ vertical-align:middle; } ul>li{ float:left; } ul>li>img{ width:100%; } .test1{ padding:02%; margin-left:-3.3%; } .test1>li{ width:30%; margin-left:3.3%; } </style> <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p> <ulclass="test1clearfix"> <li><imgsrc="img/test.jpg"alt"><li><imgsrc="img/test.jpg"alt"><styletype="text/css"> *{ margin:0; padding:0; } img{ vertical-align:middle; } .test1{ padding:02%; 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:02%; box-sizing:border-box; } .test3{ display:flex; justify-content:space-between; } .test3>li{ width:31.3%; padding:02%; float:none; } .test4{ width:1200px; border:1pxsolidred; margin-left:-3.33%; } .test4>li{ width:30%; margin-left:3.33%; } </style> <p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p> <ulclass="test2clearfix"> <li><imgsrc="img/test.jpg"alt"><li><imgsrc="img/test.jpg"alt"></ul>

这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）

3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子）

CSS Code复制内容到剪贴板 <styletype="text/css"> *{ margin:0; padding:0; } img{ vertical-align:middle; } .test1{ padding:02%; 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:02%; box-sizing:border-box; } .test3{ display:flex; justify-content:space-between; } .test3>li{ width:31.3%; padding:02%; float:none; } .test4{ width:1200px; border:1pxsolidred; margin-left:-3.33%; } .test4>li{ width:30%; margin-left:3.33%; } </style> <p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p> <ulclass="test3"> <li><imgsrc="img/test.jpg"alt"><li><imgsrc="img/test.jpg"alt"></ul>

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

4.classname实现

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

CSS Code复制内容到剪贴板 <styletype="text/css"> *{ margin:0; padding:0; } img{ vertical-align:middle; } .test1{ padding:02%; 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:02%; box-sizing:border-box; } .test3{ display:flex; justify-content:space-between; } .test3>li{ width:31.3%; padding:02%; float:none; } .test4{ padding:02%; } .test4>li{ width:30%; margin-left:5%; } .test4>li.first{ margin:0; } .test5{ padding:02%; } .test5>li{ width:30%; margin-left:5%; } .test5>li:first-child{ margin:0; } </style> <p>4.classname实现</p> <ulclass="test4clearfix"> <liclass="first"><imgsrc="img/test.jpg"alt"><li><imgsrc="img/test.jpg"alt"><styletype="text/css"> *{ margin:0; padding:0; } img{ vertical-align:middle; } .test1{ padding:02%; 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:02%; box-sizing:border-box; } .test3{ display:flex; justify-content:space-between; } .test3>li{ width:31.3%; padding:02%; float:none; } .test4{ padding:02%; } .test4>li{ width:30%; margin-left:5%; } .test4>li.first{ margin:0; } .test5{ padding:02%; } .test5>li{ width:30%; margin-left:5%; } .test5>li:first-child{ margin:0; } </style> <p>5.css选择器实现(注意ie兼容性)</p> <ulclass="test5clearfix"> <li><imgsrc="img/test.jpg"alt"><li><imgsrc="img/test.jpg"/></li> </ul>

贴上全部的DEMO

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。

原文地址：http://www.cnblogs.com/jesse007/p/5650236.html