前端頁面的布局經(jīng)歷了固定布局，表格布局刹悴，浮動行楞、定位布局, 彈性布局，網(wǎng)格布局的歷史演進土匀，各種布局方式在web發(fā)展的不同階段扮演你了不同的角色子房。
多列布局的解決方案我個人總結至少有5種之多，有的兼容性不錯但代碼結構復雜恒削，有的結構簡單但兼容性不佳池颈，但根據(jù)具體的使用環(huán)境和要求，總有一種解決方案是適合你的钓丰。
再介紹這5種解決方案之前躯砰，我想有必要廢話幾句介紹一下布局的演進史。
固定布局
這是一種很早的布局方案,就是固定容器的寬度和容器內(nèi)各個模塊的寬度.這種布局方式在現(xiàn)在的開發(fā)中仍然占據(jù)一席之地,尤其是在pc端,特別是企業(yè)站的開發(fā)中.
這個就不舉例了,任意打開一個企業(yè)站你都會發(fā)現(xiàn)它的影子.所以,不再贅述.
表格布局
這是一種較早期的web布局方案携丁，但現(xiàn)在已經(jīng)廢棄琢歇，不再使用兰怠。它其實就是使用我們常用的表格代碼如下：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
所以，這中布局方案不在贅述
浮動李茫、定位布局
浮動：是基于css現(xiàn)代web設計的重要功能之一揭保，是實現(xiàn)多列布局的基礎
屬性值： none（不浮動）， left（向左）魄宏， right（向右）
說到浮動秸侣，當我們使用浮動，就要清除浮動宠互，如何清除浮動不是本文所要講述的內(nèi)容味榛，百度輸入關鍵詞‘清除浮動’,說解決方案的文章有很多。
定位：這個css屬性是建立元素布局所用的定位機制
屬性值：static予跌， absolute搏色， fixed， relative券册， inherit
使用并且分析過bootstra等p框架的同學都會有深刻的印象
總結： 以上三種方案的局限最突出點就是自適應性差频轿，為了達到某種布局效果免不了要使用hack，這個使用不恰當會導致某種無法言語的bug烁焙。
彈性布局
彈性布局css3引入的強大的布局方案航邢，因為是css3引入的所以存在兼容性問題，這個兼容問題主要存在pc端考阱，由于移動端移動設備更新?lián)Q代快翠忠，所以在開發(fā)中可以不用考慮這方面的問題鞠苟，至少在我所做的這種移動項目中沒有問題乞榨。各位看官根據(jù)自己項目的情況來定方案。
使用并分析過mui框架和aui等移動框架的同學會有更直觀的感受
網(wǎng)格布局
網(wǎng)格布局 已經(jīng)被w3c納入到了css3的一個布局模塊中, 被稱為css grid module当娱，這個布局解決方案是未來的web頁面布局的一個趨勢吃既，但是他的各瀏覽器兼容不佳，我目前實驗的支持的只有chrome跨细，firefox等有限的幾款瀏覽器,像IE瀏覽器和微軟現(xiàn)在新推出的斯巴達瀏覽器根本就不支持鹦倚，國產(chǎn)的瀏覽器360，qq也不支持冀惭，這種布局解決方案震叙，現(xiàn)在還停留在實驗階段。不過看好它前景的不在少數(shù)哦散休！
這個我現(xiàn)在沒有找到好的例子媒楼，不過我寫了一個demo，各位看官可以用chrome瀏覽器看一下戚丸。
多列布局解決方案
這幾種解決方案是有列間距的划址，沒有列間距的相對簡單一點。
ok，我們下邊開始我們的方案解決之旅~
最終這幾種解決方案要實現(xiàn)的效果皆如下圖所示：
1.固定布局 和 float布局（float：left夺颤，兼容性最優(yōu)）
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的輔助的優(yōu)化方案)（不支持css3的免談）
就是去掉容器l-list-container, 在樣式中加入如下代碼：
.l-list-item:last-child {
margin-right: 0;
}
demo地址:demo中的第二個案例
3.轉(zhuǎn)換為內(nèi)聯(lián)元素模塊（display：inline-block，兼容性最優(yōu)）
html代碼：
<h3>轉(zhuǎn)換為內(nèi)聯(lián)模塊 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;
}
demo地址:demo中的第三個案例
4.table布局（display：table世澜，兼容性優(yōu)）
補充說明：這個是我想的沒有在開發(fā)中大面積使用独旷，這個方案我感覺是最佳的，各個瀏覽器測試下來沒有發(fā)現(xiàn)問題寥裂，各位使用中發(fā)現(xiàn)問題势告，記得@我
就是在父容器中使用用display：table，在子容器中使用display：table-cell
demo地址:demo中的第四個案例
5.彈性布局（display：flex抚恒，兼容性分為兩部分咱台，pc端不佳，手機端優(yōu)秀）
它是在父容器中使用 display: flex; justify-content: space-between;
demo地址:demo中的第五個案例
6.網(wǎng)格布局（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;
}
demo地址:demo中的第六個案例
