Question

我正在创建一个表单，我正在使用表格来创建布局。所有表格单元格的内容都与顶部对齐。我在这里创造了一幅漂亮的图画：

|--------------|----|
|      1       |    |
|--------------|  3 |
|              |    |
|      2       |    |
|--------------|----|

单元格1和2通常具有更多内容，因此它们通常决定整个表格的高度。虽然，有时单元格3的内容更多 - 它需要更多的高度而不是1和2，所以其他单元格会被拉伸。这意味着单元格1底部会有一个大的空白区域。

所以，我希望单元格1总是具有最小权重，因此如果单元格3伸出桌子，额外的空间将自己放置在单元格3的底部。为了实现这一点，我给了单元格1高度1px in css。然后它总是会尝试高度为1px，这意味着它始终具有最小的高度。

这是不好的做法吗？它适用于所有浏览器吗？

编辑：单元格3有一个1px左边框，我总是想跟随页面直到底部。这就是为什么我不使用div。

Answer 1

很难从表中获得这种形状，因为每个单元格的变化会扩大整个列这是fiddle 相反，您可以尝试以下代码。

<div id='column1'>
    <div class='cell1'>This is content 1</div>
    <div class='cell2'>This is content 2</div>
</div>
<div class='cell3'>This is content 3</div>

，样式将是

body
{
    width:410px;
    color:#fff;

}
div#column1 {
    float:left;
width:200px;

}
div#column1 div.cell1,div#column1 div.cell2
{
    width:200px;
    height:200px;
    background:#333;
    display:block;
    margin-bottom:10px;
}
div.cell3
{
    float:right;
    display:block;
    height:400px;
    width:200px;
    background:#00b3ff;

}

表格单元格高度为1 px的不良做法？

1 个答案: