0

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

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

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

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

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

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

4

1 回答 1

0

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

<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;

}
于 2013-08-21T12:49:52.550 回答