如何在HTML中有兩個相同高度的列？

我已經寫了下面的HTML：如何在HTML中有兩個相同高度的列？

<div id='wrapper'> 
    <div style='background-color:Red; float:left; width:50%'></div> 
    <div style='background-color:Green; width:50%'></div>     
</div>

這給了我紅柱和綠柱。我添加文本時，這兩列將向下擴展。然而，我真正想要的是兩列的高度完全相同，無論每列中的文本多少或多少。

我該怎麼做？

來源

2011-03-24 Daniel Allen Langdon

你的意思是要靜態地設置它們既可以是，例如，200像素在任何時候，無論內容;或者你的意思是你想讓兩列的高度始終相等。例如，如果列A的內容擴展到200像素，則即使列B只有10像素的內容，列B也會調整爲該尺寸。 – Eli 2011-03-24 18:18:57

如果紅色列有50行文本，我希望列B增長到與列A一樣高，即使它只有10行文本。我知道沒有設置上限，例如200px – 2011-03-24 18:21:40

有詳細here了堅實的選擇。

來源

2011-03-24 18:20:42

最好的辦法是使用CSS3列，但顯然這限制了您的瀏覽器支持範圍。 http://www.quirksmode.org/css/multicolumn.html

過去，你有幾個選擇，首先你可以讓他們通過javascript（痛苦和討厭）匹配。或者有一些使用負底部邊距的CSS黑客可以使其工作，但有點flair，iirc。

有關的一些負面利潤率選項參考：

來源

2011-03-24 18:19:26 whoughton

這裏有點破解，因爲它使用一個空div來清除浮點數，但是這應該會在所有瀏覽器中找到，而不使用任何JavaScript。

使用下面的CSS：

div.column { 
    float:left; 
    width:50%; 
    height:500px; 
    overflow:hidden; 
} 

div.column.first { 
    background-color:red; 
} 

div.column.second { 
    background-color:green; 
} 

div.clear { 
    clear:both; 
    height:0%; 
    width:0%; 
    line-height:0%; 
}

而下面的HTML：

<div id="wrapper"> 
    <div class="column first"></div> 
    <div class="column second"></div> 
    <div class="clear"></div> 
</div>

來源

2011-03-24 18:33:32

如何在HTML中有兩個相同高度的列？

回答

相關問題