在CSS中創建高度相等的列的問題

我一直在使用示例here來設置具有相同高度的列的網頁（僅使用HTML和CSS），並且工作得相對較好。 Here是我正在使用的完整的HTML和CSS代碼。在CSS中創建高度相等的列的問題

新手問題：

（1）如你所見，我試圖讓左邊的列（ID =「column_bottom」）有一個白色（＃f5f5f5）背景與黑色文本，右列（ id =「content_bottom」）與黑色背景與白色（＃f5f5f5）文本，但一方總是凌駕另一方。我能做些什麼來使它成爲我想要的？（2）另外，你可以在CSS中看到我已經爲body定義了字體和背景顏色，但不知怎的，這並沒有實現，我該怎麼辦？

謝謝！

P.S.我正在尋找一個純粹的HTML/CSS解決方案，並且不希望使用JavaScript。

來源

2011-02-17 hpy

你很近。在你的代碼，只需改變你的造型，以列本身，就像這樣：

#content_bottom { 
    color: #f5f5f5; 
    background:#000000; /* right column background colour */ 
} 

#column_bottom { 
    color: #000000; 
    background:#f5f5f5; /* left column background colour */ 
}

來源

2011-02-17 22:09:52 TNC

現場演示我剛剛完成：http://jsbin.com/anota5/3（它做同樣的事情） – thirtydot 2011-02-17 22:10:31

下面的代碼將創建兩個箱子並排側和容器將始終包裹的盒子，不管他們有多高。這應該解決你的問題，有相同的高度的列。

HTML：

<div class="container"> 
    <div class="box">blah</div> 
    <div class="box">blah<br/><br/>blah</div> 
    <div class="clear"></div> 
</div>

CSS：

.container { position:relative; width:100px; border:1px solid red; } 
.box { position:relative; float:left; width:40px; border:1px solid blue; } 
.clear { clear:both }

來源

2011-02-17 22:11:14 Mauro

在CSS中創建高度相等的列的問題

回答

相關問題