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

标签 html css overlap css-tables

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

注意:我添加了“_”是因为我的不间断空格丢失了。

Sample Page

Sample image

alt text
(来源:c3o.com)

内容:

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

最佳答案

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

至少在 firefox 中你可以通过设置 div 来创建一个模拟表

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

这样那些 div 就像表格元素一样工作。然后盒子将包含它的内容。这是否是一个好的解决方案是有争议的。

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

关于html - 需要不重叠的通用 div css(如表格),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/723476/

相关文章:

javascript - jQuery .focus() 不工作

html - 如何使用 CSS 设置复选框样式

javascript - 为什么单击按钮时我的 jQuery 代码不起作用?

r - 如何制作重叠的条形图?

algorithm - 重叠 AABB-Arc 和 AABB-Pie

html - 重叠粘性标题的问题(重叠其下方的主要内容)

html - bootstrap 崩溃以显示它工作的 div 但如何使其不影响副元素?

javascript - 根据视口(viewport)宽度显示不同的内容

javascript - 为什么所选的 <option> css 查询为 :checked, 但 HTML 和 Javascript 正在使用所选内容?

css - 尽管高度为 :100% property,但容器 div 并未扩展