Question

我有一个div作为包含两列的容器两列都有动态大小，我需要顶部容器采用内部divs大小，以便容器下面的内容正确排列

#container{
    width:800px;
    height: auto;
    min-height: 100%;
    margin:0 auto;
}
#leftdetails{
    float:left;
    width:250px;
    height: 100%;
}
#rightdetails{
    float:right;
    width:250px;
    height: 100%;
}

当我检查容器时，高度为0

     <div id="reamcontent">
            <div id="rightdetails">
                lots of content
            </div>
            <div id="leftdetails">
                lots of content
            </div>
     </div>
<div id"other">
 this overlaps the reamcontent
</div>

Answer 1

添加一个明确的div，这将修复高度

外部div正在崩溃，因为它内部的两个子div是浮动的

CSS

.clear {
    clear:both;
}

HTML

<div id="reamcontent">
    <div id="rightdetails">lots of content</div>
    <div id="leftdetails">lots of content</div>
    <div class="clear"></div> <!-- div added -->
</div>

Answer 2

听起来你需要clearfix：

#reamcontent:after {
  content: "";
  display: table;
  clear: both;
}

div高度未根据内部div设置

2 个答案: