前言
最近，面試的時候都碰到一些關於利用css實現多列等高布局或者一側寬度固定，另一側寬度自適應的問題，下面稍微總結一下：
規定下面的布局，實現多列等高布局，要求兩列背景色等高。
1<
div
class
="container"
>
2<
div
class
="left"
>多列等高布局左
多列等高布局左
div>
3<
div
class
="right"
>多列等高布局右
div>
4div
>
方法一：使用flex布局
<div
class
="container"
>
<
div
class
="left"
>多列等高布局左<
br/>多列等高布局左
div>
<
div
class
="right"
>多列等高布局右
div>
div>
.container.left,.right.left.right
缺點: ie9及ie9以下版本不支援flex屬性
優點：實現方便，還可以方便實現各種比例
方法二:給容器div使用單獨的背景色（流體布局）
原理就是給每一列新增相對應用的容器，並進行相互巢狀，並在每個容器中設定背景色。這裡需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那麼你就需要使用三個容器。如下所示：
1<
div
id="container2"
>
2<
div
id="container1"
>
3<
div
id="col1"
>column 1
div>
4<
div
id="col2"
>column 2；column 2；column 2；column 2；column 2
div>
5div
>
6div
>
1// 在這裡有兩列，故需要兩個容器
2#container2 910
#container1
1718
#col1
2425
#col2
優點：相容各種瀏覽器
缺點：巢狀太多div元素
兩列等高布局，請戳 demo ；三列等高布局 ，請戳demo；
方法三：使用內外邊距相抵消，注意父元素設定 "overflow:hidden;"
<div
id="container"
>
<
div
id="left"
class
="column aside"
>
<
p>sidebar
p>
div>
<
div
id="content"
class
="column section"
>
<
p>main content；content；content；content；content
p>
div>
<
div
id="right"
class
="column aside"
>
<
p>sidebar
p>
div>
div>
1#container 67
.column
1516
#content
1920
#right
優點：相容所有瀏覽器
戳 demo
方法四：邊框模仿等高列
<div
id="containerouter"
>
<
div
id="container"
>
<
div
id="content"
>;main content;main content;main content;main content;main content;main content;main content
div>
<
div
id="left"
>left sidebar
div>
<
div
id="right"
>right sidebar
div>
div>
div>
#containerouter #container #left #content #right
戳 demo
小結：實現的方式還有很多~今天暫時總結這些~~日後再繼續新增
多列等高布局
需求 當兩列的內容變化時，要保證內容相同，且和較長的那列相同。lang en charset utf 8 測試專用title type text css parent left right style head class parent class left leftp div class righ...
多列等高布局
網頁編寫中因為div沒有固定高度，裡面的內容大小不一樣導致div的高度自適應也是不一樣的 原理 padding bottom 500px 會讓三個盒子拉伸的非常高，然後利用 margin bottom 500px 將各個元素切割掉 500px，最後父元素將超出的部分隱藏，就出現了這個效果。統一稱為最...
CSS小技巧之多列等高布局
網頁開發中經常會遇到下面這樣的情景，每個模組的高度不一樣，又是不定高，用js動態獲取又顯得沒必要，總結了以下兩個小技巧 html some code some code some code css left,right center box box div 出現這種情況的原因也很簡單，就是各個 di...