行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,你的问题是因为"cell"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:)