相信大家在專案的開發上都曾經遇過這樣的需求，一行放X（X>1）個區塊且相鄰區塊之間的間距相同。
大概就是上面這個樣子，下面介紹幾種實現的方式。
1.負margin大法
設定好元素的寬度和留白佔滿父級的寬度，然後設定父級的margin-left為留白的負留白的寬度
Code複製內容到剪貼簿
<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"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
</ul>
上面的誤差是因為ul的margin和li的margin百分比的計算基於的元素不一樣導致的，但是在移動端上因為視窗的範圍有限，這個差異很小，在pc上一般使用px，所以可以忽略。 （下面還有更多的辦法）
2.各大網站的實現，在元素內部進行填充,使用box-sizing，需要ie8以上才支持
CSS CodeSS到剪貼簿<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"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></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"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
</ul>
這種情況怎麼能少了我們呢，盒模型應該是專門用來處理吧新舊盒子模型之分，各瀏覽器實現的都不太一樣。所以一般情況兩套盒子模型的屬性都需要加上。 （喜歡折騰就上吧，效果棒棒的）
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"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
</ul>
<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"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
<li><img src="img/test.jpg"/ alt="css佈局之負margin妙用及其他實現" ></li>
</ul>: 實作-type-of :nth-child() 這些實現都沒有什麼技術難點，大家可以去查閱一下css文檔，注意一下兼容性沒問題了
CSS Code
複製內容到剪貼板 rrreee
貼上全部的DEMO差點忘了還有一種情況X=2時，設定好width，左邊左浮動，右邊右浮動。
其實X=3時，還有一種處理方式，左右元素分別左右浮動，中間元素相對於父級設定絕對定位，居中定位。
注意，由於不能整除的原因，不能像box-sizing那樣完美的計算，但是合理的應用在項目上完全沒問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。
