前端頁面的布局經(jīng)歷了固定布局，表格布局，浮動、定位布局, 彈性布局，網(wǎng)格布局的歷史演進，各種布局方式在web發(fā)展的不同階段扮演你了不同的角色。

多列布局的解決方案我個人總結(jié)至少有5種之多，有的兼容性不錯但代碼結(jié)構(gòu)復(fù)雜，有的結(jié)構(gòu)簡單但兼容性不佳，但根據(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設(shè)計的重要功能之一，是實現(xiàn)多列布局的基礎(chǔ)
屬性值： none（不浮動）， left（向左）， right（向右）
說到浮動，當(dāng)我們使用浮動，就要清除浮動，如何清除浮動不是本文所要講述的內(nèi)容，百度輸入關(guān)鍵詞‘清除浮動’,說解決方案的文章有很多。

定位：這個css屬性是建立元素布局所用的定位機制
屬性值：static， absolute， fixed， relative， inherit

使用并且分析過bootstra等p框架的同學(xué)都會有深刻的印象

總結(jié)： 以上三種方案的局限最突出點就是自適應(yīng)性差，為了達到某種布局效果免不了要使用hack，這個使用不恰當(dāng)會導(dǎo)致某種無法言語的bug。

彈性布局

彈性布局css3引入的強大的布局方案，因為是css3引入的所以存在兼容性問題，這個兼容問題主要存在pc端，由于移動端移動設(shè)備更新?lián)Q代快，所以在開發(fā)中可以不用考慮這方面的問題，至少在我所做的這種移動項目中沒有問題。各位看官根據(jù)自己項目的情況來定方案。

使用并分析過mui框架和aui等移動框架的同學(xué)會有更直觀的感受

網(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)的效果皆如下圖所示：

col-1.png

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

col-1.png

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中的第六個案例