Question

我有两个父div，contenttop和contentbottom。我已将两者都设置为宽度：100％和高度：自动（我希望它们基于它们包含的div而变得流畅）在这两个div中的每一个中我都有两个div：

#col1, #col2, #col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

也设置为流畅的，即设置为其中任何文本的大小。

我遇到的问题是除非我设置了特定的高度，否则不会显示contenttop和contentbottom div。 #col div正确地行为，但我的内容div的背景颜色不会出现。

这里发生了什么？有解决方案吗？

这是完整的CSS：

body
{
    background-color:aquamarine;
}

p, p.maintextcontent, h1, h2, h3, h4, h5, h6
{
    margin:0;
    padding:0;
}

#contenttop
{
    position:relative;
    width:100%;
    height:auto;
    background-color:brown;
    margin:0;
    padding:0;
}

#col1, #col2
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

#contentbottom
{
    clear:both;
    position:relative;
    width:100%;
    height:auto;
    background-color:#000000;
    margin:0;
    padding:0;
}

#col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

由于

Answer 1

这是因为内容（＃col1等）是浮动的。这些使容器保持高度。一种常见的解决方案是将此规则添加到容器中（＃contenttop，＃contentbottom）：

overflow:hidden;

查看这个简化的小提琴：http://jsfiddle.net/w2DrF/

当高度：auto时，父div不出现

1 个答案: