5

我正在尝试使用 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>
4

7 回答 7

2

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

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

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

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

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

于 2009-04-06T22:37:31.550 回答
2

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

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

下次出现此类问题时，请访问giveupandusetables.com。

于 2009-04-08T16:33:22.750 回答
0

一种方法是让你的盒子漂浮起来。添加浮动：左；到 box、box-header 和 box-body。添加明确：两者；到 box-body 以强制它低于 box-header。您可能还需要为后面的任何内容添加 clear 属性。

但是，您不会使 box-header 和 box-body 的右边缘对齐。如果您希望它们的宽度相同，那么您真的需要一张桌子。表格是使同一列中的所有单元格共享宽度的工具。

对于其他想法，请查看这个 SO question。

于 2009-04-07T00:01:35.857 回答
0

这很有效（实际上也比 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;
}

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

于 2009-04-07T08:59:30.620 回答
0

首先，您应该使用语义标记。如果某些内容是标题和内容，则使用标题和段落标签将其标记出来。如果您尝试像表格一样模拟您的标记和样式，这将帮助您摆脱“表格方式”的思维，标记应该放在第一位，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)

于 2009-04-07T09:35:57.880 回答
0

不需要浮点数，但您似乎混淆了边距与填充的使用。以下对您的风格的细微调整可根据您的需要进行：

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

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

于 2009-04-08T15:52:54.893 回答
0

我在使用 Firefox 6.0.1、Opera 10.62、Safari 5.1 时也遇到了这个问题，但在 IE 9 中没有，并且溢出：自动在所有浏览器中修复了它。其他什么都没做。我还尝试了溢出：包含，这也解决了问题，但似乎包含不是溢出的有效值，所以我假设，由于该值无效，因此替换了 auto。

于 2011-09-01T15:26:18.613 回答