相信大家在項目的開發中都遇到過這樣的需求，一行放X（X>1）個塊且相鄰塊之間的間距相同。 大概就是上面這個樣子，下麵介紹幾種實現的方式。 1.負margin大法 設置好元素的寬度和留白占滿父級的寬度，然後設置父級的margin-left為留白的負留白的寬度 *{ margin: 0; padding ...
相信大家在項目的開發中都遇到過這樣的需求，一行放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那樣完美的計算，但是合理的應用在項目上完全沒問題。
個人思路畢竟有限，如果大家還有什麼其他方案，歡迎留言。
