需要不重叠的通用div css(如表)

Question

我正在尝试使用div而不是表来为我的内容设置样式框.内容可以是任何大小,并且需要允许浏览器在任何程度上调整大小.需要背景颜色和边框来包含内容.这适用于表格.如何让div以相同的方式工作？

注意:我添加了"_",因为我的不间断空格正在丢失.

样本页面

样本图片

替代文字http://www.c3o.com/div-like-table.JPG

内容:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Answer 1

据我所知，没有一种跨浏览器友好的简单方法可以做到这一点。

至少在 Firefox 中，您可以通过设置 div 创建一个模拟表

display:table;
display:table-row;
display:table-cell;

这样这些 div 就可以像表格元素一样工作。然后盒子将包含它的内容。这是否是一个好的解决方案还有待商榷。

我自己也遇到过类似的页面布局问题。通常我通过设置 min-width 和 Overflow:auto; 来解决这些问题