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：）