Question

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

注意：我添加了“_”，因为我的不间断空格正在丢失。

_{（来源：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>

Answer 1

没有简单的方法可以做到这一点，我知道的是对浏览器友好。

至少在firefox中，您可以通过使用

设置div来创建模拟表

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

这些div就像表元素一样工作。然后该框将包含它的内容。不管是不是一个好的解决方案，这都是有争议的。

我自己也遇到过与页面布局类似的问题。通常我通过设置min-width和overflow：auto;

来解决这些问题

Answer 2

如果你真的不想使用表格，你可以这样做：

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

下次出现此类问题请转至giveupandusetables.com。

Answer 3

一种方法是让你的盒子漂浮。添加浮动：左;盒子，盒子和盒子。加上明确：两者;箱体强制它在箱头下方。您可能还需要为后面的内容添加clear属性。

但是，你不会让box-header和box-body的右边缘对齐。如果你想要它们的宽度相同，你真的想要一张桌子。表是一个工具，可以使同一列中的所有单元格共享宽度。

有关其他想法，请查看this SO question。

Answer 4

这有效（实际上也比ie7中的表更好）

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

注意：两个盒子必须有相同的左右填充或一个突出。

Answer 5

首先，您应该使用语义标记。如果某些内容是标题，则内容会使用标题和段落标记对其进行标记。如果您尝试模拟标记和样式（如表格），那么这将有助于您摆脱“表格式”的思考，首先应该是标记，然后是CSS。

以下应该做你想做的事：

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

分别考虑标记和样式是CSS Zen Mastery的路径：o）

Answer 6

不需要浮点数，但您似乎混淆了保证金与填充的使用。您需要对您的风格进行以下微调：

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

我已将框上的填充更改为边距，将边框移动到框中，并在标题中添加下划线。

Answer 7

我也遇到过这个问题，使用Firefox 6.0.1，Opera 10.62，Safari 5.1，但不是在IE 9中，溢出：自动修复它在所有浏览器中。没有别的。我也试过overflow：contains，这也修复了问题，但看起来contains不是溢出的有效值，所以我假设，因为该值无效，auto被替换。

需要不重叠的通用div css（如表）

7 个答案: