html - 让 div 的行为像一个表

Question

所以我真的尝试专门使用 div，而不是使用表格来进行布局，但我仍然被困在这里和那里。今天我遇到了其中一个案例。

考虑以下标记:

<div style="width:943px;margin:0px auto;height:auto">
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div>
    </div>
    <div style="height:auto;display:block;clear:both">
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div>
        <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;">
            <br />
            Some text heeere.
            <br />
            Some more text heeere.
        </div>
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div>
    </div>
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div>
    </div>
</div>

现在这是它在做什么:

请注意，它会稍微超过页面高度。

这是我想要它做的:

我希望它在不指定高度的情况下流畅地“适合”文本。似乎问题出在两侧 div 上，除非您将高度指定为 100%，否则它们将不起作用。是否有另一种/更简单的方法来做到这一点？

谢谢!

Answer 1

如果数据是表格形式的(这意味着它在语义上属于正确的行和列，而不仅仅是视觉上)，您应该使用表格。

如果它只是您喜欢的布局，则有一个 css 规则可能会有所帮助，但不适用于所有浏览器:

div.column {
   display: table-column;
}

div.cell {
  display: table-cell;
}

这假设您将所有“列”div 分配给 column 类，而您的“单元格”div 分配给 cell 类。

表类行为的显示选项的完整列表是:

table   
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group