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

现在这就是它的作用:

替代文字http://img97.imageshack.us/img97/4281/screenshot20100215at935.png

请注意,它略高于页面高度.

这就是我想要它做的事情:

替代文字http://img714.imageshack.us/img714/8504/screenshot20100215at936.png

我希望它在不指定高度的情况下流畅地"适应"文本.似乎问题在于除非您将高度指定为100%,否则两个侧面div将无法工作.有没有其他/更简单的方法来做到这一点？

谢谢!

Answer 1

如果数据是表格式的(意味着它在语义上落入适当的行和列,而不仅仅是在视觉上),您应该使用表格.

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

div.column {
   display: table-column;
}

div.cell {
  display: table-cell;
}

这假设您为所有"列"div分配了类,column而"cell"则分配了类cell.

表格式行为的完整显示选项列表如下:

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