需要通用的DIV + CSS不重叠（如表）

StackOverflow https://stackoverflow.com/questions/723476

  •  05-09-2019
  •  | 
  •  

题

我想要使用div的，而不是表样式框在我的内容。内容可以是的任何尺寸并需要允许浏览器是的调整为任何程度即可。需要的背景色和边框的包含的内容即可。这工作得很好用表。我如何获得一个div以相同的方式工作？

请注意：我补充说：“_”是因为我的非中断空格中迷路

示例页面

样品图片

“ALT文本” 结果 <子>（来源： 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工作像表元素。然后框将包含它的内容。阉这是一个很好的解决与否商榷。

我一直有与页面布局自己类似的问题。一般我已经解决那些通过设置最小宽度和溢出：汽车;

其他提示

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

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

这样的问题出现了下一次去 giveupandusetables.com 。

一个办法是让你的箱子漂浮。添加浮动：左;到箱，箱头和盒体。添加明确：两者;到盒体以迫使下面方框头吧。您可能会需要明确的属性添加到任何内容如下为好。

您不会得到箱头和盒体对齐的右边缘，虽然。如果你希望自己的宽度是相同的，你真的想要一个表。表是使所有小区在同一列中共享的宽度的工具。

有关其他的想法，检查出这太问题

首先，应该使用语义标记。如果事情是头部和内容标记它作为用这样的标题和段落标记。这将帮助你搬出的“表的方式”的思维是你试图模仿您的标记和样式像一个表，标记应该放在第一位，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禅掌握：○）

此工作（实际上保持在一起比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;
}

注意：两个框必须有相同的左右填充或一个伸出位

。
不需要

浮筒，但似乎会混淆余量的用途与填充。下面的一些小改动，以你的风格的作品，你需要它：

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

我已经改变了填充包装盒上的保证金，搬到边境你的箱子，并添加下划线的标题。

我有这个问题也使用Firefox 6.0.1，歌剧10.62，Safari浏览器5.1，但不是在IE 9和溢出：自动在所有浏览器固定它。没有别的没有。我还试图溢出：包含，这也解决了这一问题，但它似乎含有不溢出的有效值，所以我假设，由于值无效，汽车被取代的

不隶属于 StackOverflow
scroll top