行格div上的bg顏色

Question

我正在嘗試學習如何將表格內容放入css浮動。

我的方法是在「表」級別，「行」級別和「單元格」級別使用div。不知道這是一個好策略。

無論如何，當我在「表格」或「單元格」級別設置背景樣式時，我可以看到顏色變化。當我將它設置在行級時，它保持白色。

任何猜測發生了什麼事？有一個更好的方法嗎？

<h2>"Tables" work</h2> 
<div style="width: 455px; background-color:#a4c4fc"> 
    <div> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div> 
     <div style="width: 70px; float: left">1<LEFT></div> 
     <div style="width: 220px; float: left">3</div> 
     <div style="width: 50px; float: left">4</div> 
    </div> 
</div> 

<br> 

<h2>"Row" divs do not seem to work</h2> 
<div style="width: 455px"> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">0</div> 
     <div style="width: 220px; float: left">0</div> 
     <div style="width: 50px; float: left">1</div> 
    </div> 
</div> 

<br> 

<h2>Individual cell divs work</h2> 
<div style="width: 455px"> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left; background-color:#a4c4fc">ID</div> 
     <div style="width: 220px; float: left; background-color:#a4c4fc">Lemons</div> 
     <div style="width: 50px; float: left; background-color:#a4c4fc">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left; background-color:#a4c4fc">0</div> 
     <div style="width: 220px; float: left; background-color:#a4c4fc">0</div> 
     <div style="width: 50px; float: left; background-color:#a4c4fc">1</div> 
    </div> 
</div> 

Answer 1

這看起來像表格數據。

如果是這樣，則應使用HTML table元素來顯示此信息。

太多人會因爲聽到「桌子不好」而犯錯誤，並嘗試使用div來解決問題，即使桌子最合適也是如此。

當人們說你不應該使用表格時，他們指的是佈局結構。在這種情況下使用它仍然很好，它們不是邪惡的！

然後你就可以做到：

<tr style="background-color:#a4c4fc;"> 

</tr> 

---

如果您使用的div您的問題一定是因爲「細胞」的div都是float:left;。因此你的「行」div沒有高度。

您可以添加以下的 「細胞」 的底部，以解決此問題：

<div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
     <div style="clear:both;overflow:hidden;height:0;"></div> 
</div> 

另外，使用display:inline-block;

<div style="background-color:#a4c4fc"> 
     <div style="width: 70px; display:inline-block;">ID</div> 
     <div style="width: 220px; display:inline-block;">Lemons</div> 
     <div style="width: 50px; display:inline-block;">Horseradish</div> 
</div> 

http://jsfiddle.net/hRCWk/2/

但是不要那麼，請使用table :)

Answer 2

清除你的花車。將overflow:hidden;添加到您的行區域。

另外，<br clear: both>是沒有意義的。刪除或使用<div style="clear:both;"></div>

演示：http://jsfiddle.net/RX8Pq/

Answer 3

行元素不拉伸，因爲所有的子元素浮動：

http://www.quirksmode.org/css/clearing.html

Answer 4

而是浮你的div元素，你可以設置它們的顯示爲嵌入塊...

display:inline-block; 

那麼你不需要清除DI V之後漂浮。

當然，你應該只使用一個表反正

注意：顯然，這不會在IE8和更早版本。