前端頁面的布局經曆了固定布局，表格布局，浮動、定位布局, 彈性布局，網格布局的曆史演進，各種布局方式在web發展的不同階段扮演你了不同的角色。
多列布局的解決方案我個人總結至少有5種之多，有的相容性不錯但代碼結構複雜，有的結構簡單但相容性不佳，但根據具體的使用環境和要求，總有一種解決方案是适合你的。
再介紹這5種解決方案之前，我想有必要廢話幾句介紹一下布局的演進史。
固定布局
這是一種很早的布局方案,就是固定容器的寬度和容器内各個子產品的寬度.這種布局方式在現在的開發中仍然占據一席之地,尤其是在pc端,特别是企業站的開發中.
這個就不舉例了,任意打開一個企業站你都會發現它的影子.是以,不再贅述.
表格布局
這是一種較早期的web布局方案，但現在已經廢棄，不再使用。它其實就是使用我們常用的表格代碼如下：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
是以，這中布局方案不在贅述
浮動、定位布局
浮動：是基于css現代web設計的重要功能之一，是實作多列布局的基礎
屬性值： none（不浮動）， left（向左）， right（向右）
說到浮動，當我們使用浮動，就要清除浮動，如何清除浮動不是本文所要講述的内容，百度輸入關鍵詞‘清除浮動’,說解決方案的文章有很多。
定位：這個css屬性是建立元素布局所用的定位機制
屬性值：static， absolute， fixed， relative， inherit
使用并且分析過bootstra等p架構的同學都會有深刻的印象
總結： 以上三種方案的局限最突出點就是自适應性差，為了達到某種布局效果免不了要使用hack，這個使用不恰當會導緻某種無法言語的bug。
彈性布局
彈性布局css3引入的強大的布局方案，因為是css3引入的是以存在相容性問題，這個相容問題主要存在pc端，由于移動端移動裝置更新換代快，是以在開發中可以不用考慮這方面的問題，至少在我所做的這種移動項目中沒有問題。各位看官根據自己項目的情況來定方案。
使用并分析過mui架構和aui等移動架構的同學會有更直覺的感受
網格布局
網格布局 已經被w3c納入到了css3的一個布局子產品中, 被稱為css grid module，這個布局解決方案是未來的web頁面布局的一個趨勢，但是他的各浏覽器相容不佳，我目前實驗的支援的隻有chrome，firefox等有限的幾款浏覽器,像IE浏覽器和微軟現在新推出的斯巴達浏覽器根本就不支援，國産的浏覽器360，qq也不支援，這種布局解決方案，現在還停留在實驗階段。不過看好它前景的不在少數哦！
這個我現在沒有找到好的例子，不過我寫了一個demo，各位看官可以用chrome浏覽器看一下。
多列布局解決方案
這幾種解決方案是有列間距的，沒有列間距的相對簡單一點。
ok，我們下邊開始我們的方案解決之旅~
最終這幾種解決方案要實作的效果皆如下圖所示：
col-1.png
1.固定布局 和 float布局（float：left，相容性最優）
html代碼
<h3> float布局 外包一個box l-list-container overflow:hidden, l-list加寬一個l-list-item margin-right</h3>
<div class="l-list-container">
<div class="l-list">
<div class="l-list-item"></div>
<div class="l-list-item"></div>
<div class="l-list-item"></div>
<div class="l-list-item"></div>
</div>
</div>
css代碼
.l-list-container {
width: 1000px; height: auto; margin: 0 auto; overflow: hidden; border: 1px solid #ff0000;
}
.l-list {
width: 1020px; height: auto; /* margin: 0 auto; */ border: 1px solid #cecece; overflow: hidden;
}
.l-list-item{
width: 235px; height: 220px; margin-right: 20px; float: left; background-color: #cecece;
}
demo位址:
demo中的第一個案例2.固定布局 和 float布局(float：left；css3的輔助的優化方案)（不支援css3的免談）
就是去掉容器l-list-container, 在樣式中加入如下代碼：
.l-list-item:last-child {
margin-right: 0;
}
3.轉換為内聯元素子產品（display：inline-block，相容性最優）
html代碼：
<h3>轉換為内聯子產品 diaplay: inline-block </h3>
<div class="l-list3">
<div class="l-list-item3"></div>
<div class="l-list-item3"></div>
<div class="l-list-item3"></div>
<div class="l-list-item3"></div>
</div>
css代碼：
.l-list3 {
width: 1000px; height: auto; margin: 0 auto; font-size: 0; border: 1px solid #cecece;overflow: hidden;
}
.l-list-item3 {
display: inline-block; width: 235px; height: 220px; margin-right: 20px; background-color: #cecece;
}
4.table布局（display：table，相容性優）
補充說明：這個是我想的沒有在開發中大面積使用，這個方案我感覺是最佳的，各個浏覽器測試下來沒有發現問題，各位使用中發現問題，記得@我
就是在父容器中使用用display：table，在子容器中使用display：table-cell
5.彈性布局（display：flex，相容性分為兩部分，pc端不佳，手機端優秀）
它是在父容器中使用 display: flex; justify-content: space-between;
demo中的第五個案例6.網格布局（display：grid，相容性不佳）
.l-list5 {
width: 1000px; height: auto; display: grid; grid-column-gap: 20px; grid-template-columns: 235px 235px 235px 235px; grid-template-rows: 220px; margin: 0 auto; border: 1px solid #cecece;
}