css實現左右頂頭、寬度自適應的多列、多塊並排，多列布局

今天在工做中遇到了一個問題：有三個div塊，裏面放置展現內容，並排，中間有間隙，兩邊頂頭，能夠隨屏幕大小自適應寬度。
我第一時間想到的是傳統的三列布局，但傳統的三列布局都是固定寬度加自適應寬度，從網上搜了很久都沒有搜到結果。因此本身想辦法。

第一種想到的辦法：

第一種我準備用兩邊float，中間margin居中的方法。代碼以下：
css:

.wrap{height:300px;width:95%;margin: 100px auto;}
    .left{float:left;width:32%;height:100px;background-color: #235255}
    .right{float:right;width:32%;height:100px;background-color: #374737}
    .middle{width:32%;margin:0 auto;height:100px;background-color: #563958}

html:

<div class="wrap">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

結果變成了這樣：

查了一下，解決辦法是把right提到最前面。試了一下，成功了。

html:
    <div class="wrap">
        <div class="right"></div>
        <div class="left"></div>
        <div class="middle"></div>         
    </div>

不過思考一下，這個問題有不少的不方便。首先就是可能會打亂html的加載順序，還有就是間距是不固定的，而且加了float，可能會有反作用。
以後我就考慮第二種方案。問了下同事，提到了能夠用inline-block代替float的方法。這給了我很大的啓發。回來我就試了一下。

第二種想到的辦法

這種方法將這三個塊都設置成display:inline-block，利用inline元素的特性將其居於一行，再將其box-sizing屬性設置成border-box。
這種方法，好處有幾點：
1.不會有float的反作用存在
2.無論是三列仍是三十列，來就行
代碼以下：
css：

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
    .in-bl{display: inline-block;}
    .f{width: 33.333%;height: 100px;background-color: #ab1256;}
    .s{width: 33.333%;height: 100px;}
    .t{width: 33.333%;height: 100px;background-color:#192873;}

html:

<div class="g-bd">
    <div class="f in-bl">        
    </div>
    <div class="s in-bl">
    </div>
    <div class="t in-bl">
    </div>
    </div>

結果與預想的不太相同。預想中他們之間沒有空隙，充滿容器，不會換行。結果他們義無反顧地換行了，之間有了一個本不應存在的空隙。
緣由也很簡單，做爲一個帶有inline的元素之間換行是會被識別爲空格的（哭）。
原理找到了，這裏有詳細的解釋，鑫旭大神就是厲害：張鑫旭對於inline-block的理解。這裏是個demo，就用最簡單的方法去除空格就行了。
接下來還有個問題：沒法經過margin/padding來給他們之間設置間隔。這裏想了一個辦法：在每一個盒子裏面嵌套一個盒子，背景設置給裏面的，寬度設置比100%小一點，經過margin：auto進行調整位置，這樣就有一個能夠調整的間隙了~
代碼以下：
css：

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
.in-bl{display: inline-block;}
.f{width: 33.333%;height: 100px;background-color: #ab1256;}
.s{width: 33.333%;height: 100px;}
.t{width: 33.333%;height: 100px;background-color:#192873;}
.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}

html：

<div class="g-bd">
<div class="f in-bl">
    <div class="in">
        
    </div>
</div><div class="s in-bl"><!--這裏把結束標籤與下一個標籤合併了，正式工做時會給後端工程師添麻煩，不建議使用-->
    <div class="in">
        
    </div>
</div><div class="t in-bl">
    <div class="in">
        
    </div>
</div>
</div>

效果：

大功告成。這樣的方法會增長一個嵌套，要設置border-box，也算是有些反作用了。到工做時再根據須要進行取捨吧。