3列css如何使列甚至？

Question

我有這個模板：http://demitogroup.com/dgroup/sample.html

我的問題是，我不能使三列甚至在最後。其實這個問題只是左欄，因爲它比別人短，顏色就在那裏結束。

我嘗試了幾種解決方案，但總是出錯。我認爲這很清楚：兩者;可以幫助，但它什麼都不做。

任何想法？

Answer 1

您可以在每列上使用display: table-cell，在父項（*）上使用display: table。這將迫使你的「細胞」擁有相同的高度並留在同一排。

（*）將table-layout: fixed添加到此同一父級，因爲您希望使用精確的寬度，否則瀏覽器也將適應每個「單元」的內容。

小提琴：http://jsfiddle.net/PhilippeVay/sFBGX/2/

兼容性是IE8 +，如果需要回退的IE6/7是完全一樣的inline-block

較長的解釋在以前的答案：here和there用也不錯舊方法虛擬列（您的設計必須考慮到此技術）

Answer 2

以下內容添加到您的樣式表：

#content { 
    overflow: hidden; 
    clear: both; 
} 

#tertiaryContent, #secondaryContent { 
    padding-bottom: 100000px; 
    margin-bottom: -100000px; 
} 

Answer 3

我知道jQuery是沒有標記，但在所有其他CSS的解決方案失敗的情況下，這裏是jQuery代碼來支持這一點。 （因爲網站上的怪hrml標記，浮動和其他的東西的）

我創造了這個jQuery代碼

$(document).ready(function(){ 
     var left = $("#left").height(); 
     var right = $("#right").height(); 

     if (left<=right) $("#left").css("height", right); 
     else $("#right").css("height", left); 
}); 

這個HTML標記

<div id="container"> 
    <div id="left">Short one</div> 
    <div id="right">Long one</div> 
<div> 

這個CSS

#container { 
    width: 100%; 
} 

#left { 
    background: red; 
    width: 100px; 
    float: left; 
} 

#right { 
    background: red; 
    width: 100px; 
    float: right; 
} 

http://jsfiddle.net/cQUep/1/