多列等高的問題
上例中有包含不同內容的 3 列，可以看出存在的問題是列的背景色隨著其包含內容的高度而自適應展開。這是我們要解決的問題。如何使所有的列等高？或具體的說，如何使所有列的高度等於最高列的高度？這很棘手，因為我們不清楚每列將會多高，哪一列是最高的。不能簡單的給所有列乙個固定的高度，如果內容很少將會導致頁面底部有大片空白；如果內容太多則會在文字顯示完全前關閉。兩種情形都不妥。實際上，內容的長度是動態的，所以每列的高度也是動態的。必須意識到 web 上沒有固定的東東，鄉民們有不同的螢幕解析度，瀏覽器中的文字也可能被設定為任意大小，所有這些都會影響內容的高度。
分離列內容與其背景色
解決等高問題的第一步是把能分離的破開。方法是每列用兩個 div 替代原來的乙個。第乙個 div 用來放內容，另乙個用來作背景色。分離使我們可以單獨控制這些額外的元素，之後用更有效的方法把它們放在一起。答案呼之欲出。
浮動的容器的高度始終取決於其浮動的內容（高度）
這是本文多列等高方法的核心。 使乙個 div 的高度等於最高列高度的唯一方法是這個 div 包含所有的列。換句話說，通過把所有的列放在乙個容器中，容器的高度就是最高列的高度。這是個非常有用的結構。
3列 html div 結構
上例中 3 個內容列在乙個 div 容器中。
column 1
column 2
column 3
3 列 css
下面是使 div 容器等高於最高列的 css。
#container1
#col1
#col2
#col3
為了讓這一結構在所有瀏覽器中正確工作，容器 div 必須浮動（左或右），同時每乙個內容列的 div 也要浮動，哪種方式並不重要。浮動內容 div 的程序使它們在頁面中排列在一條水平線上。浮動容器使其自適應到最高列的高度。如果不浮動容器，內容 div 將會從容器底部溢位，容器不會擁有正確的高度。事實上在此例中，容器不浮動的話其最終高度為0。
增加額外巢狀的容器
下一步是增加額外的容器，它們彼此巢狀。我們需要容器的數量等於列的數量：3。這 3 個容器用作各列的背景。請注意，我們去除了原始列的背景色，並將其加至容器上。
3列 html div 結構
兩個額外的容器加至下面的 html 中。
girbzobka3">
column 1
column 2
column 3
3 列 css
所有元素左浮動，容器寬度設為100%，使他們佔滿頁面的寬度。背景色從內容 div www.cppcns.com移除並加至容器上。
#container3
#container2
#container1
#col1
#col2
#col3
用相對定位移動容器
現在用相對定位把容器移至新的位置。移動後 div 如下圖所示。即等高列背景容器的層疊和位置。為了顯示右側的綠色列 container2 向左移了30%，為了顯示中間的黃色列 container1 向左移動了40%，與此同時紅色部分依然可見作為左側列。
相對定位的 css
下面是新增了相對定位的css。
#container3
#container2
#container1
#col1
#col2
#col3
將每列的內容移回
下一步是把每列的內容移回到頁面上，使之排列在下面的背景色上。再次使用簡單的相對定位來完成它。
最後在最外面的容器 container3 上新增overflow:hidden，砍去超出容器的部分。
相對定位的 css
下面是增加了相對定位和溢位的 css 規則。請注意 container3 上額外的position:relative; 這是為了解決乙個 ie bug ，阻止overflow:hidden;工作。
#container3
#container2
#container1
#col1
#col2
#col3
對列增加 padding
最後還需對列增加 padding，這樣每列邊緣的文字不至於顯得擁擠。如果我們增加 padding，一些瀏覽器中可能正常顯示，但不是所有。ie 錯誤的盒模型，導致其估算擁有 padding 的元素寬度異常。乙個 200px 寬 20px padding 的 box 在 ie 中被視為 200px 寬，在其他瀏覽器中則為正確的 240px。padding 應該加在元素的寬度上。凸微軟！
不過不用擔心...我們可以用完全不依賴於 padding 的方法來解決這個問題。相反，我們把列弄窄一點（列寬減去兩側的 padding），之後用相對定位把它們移至正確的位置。在我們的例子中我們用了 2% 的 padding，則 30% 的列將減至 26%，40% 的列減至 36%。用相對定位移回列時需謹記，現在列變窄了，所以當它們一起像最初那樣左浮動時，每乙個需要比上乙個移動更遠的距離。
完整的css
為了使布局保持在小寬度我在每個內容列增加了overflow:hidden; 這將切去超出列寬的東東，並阻止其干擾其他布局。重申一下，這只是 ie 的問題，其他所有瀏覽器會保持正確的布局，不管列內是蝦公尺。如果你真想這樣做，可以用 ie 條件注釋只對 ie 寫規則。
#container3
#container2
#container1
#col1
#col2
#col3
好了，就是這樣。我希望這篇文章對你有用。可以自己弄一下 css 看一下它是如何工作的。你可以搞很多列，只要容器和內容列的數目相等。不要忘記看看我的 demo：2 列 ， 3 列， 4 列，以及 5 列。
本文標題: css 多列布局問題簡單解決方案
本文位址:
布局解決方案之多列布局
1 定寬與自適應布局 方案1 float margin css 1 left 6.right html 123 left45 6right 7right89 方案2 float margin fix css 1 left 6.right fix 11.right html 1 div class p...
css布局解決方案
總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...
CSS布局解決方案
使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...