css - html - div 的问题

Question

有父 block :

#content
{
position: relative;
width: 92%;
margin: 0 auto;
height: 100%;
min-height: 500px;
border: 1px solid red;
}

我需要 2 个 block :

#news
{
position: relative;
float: left;
min-height: 400px;
width: 290px;
height: 100%;
}
#text
{
position: relative;
float: left;
margin-left: 20px;
min-height: 400px;
width: 625px;
height: 100%;
}

        <div id="content">
            <div id="news">
                ...
            </div>
            <div id="text">
                ...
            </div>
        </div>

但是第二个文本 block 与新闻不在同一行。而且，在调整新闻和文本 block 的大小后，内容 block 也应该调整大小，但它没有...为什么？

Answer 1

这是因为#content 中的两个 div 都是 float 的，使它们脱离了正常的文档流。在 #content 上，将 height: 100%; 更改为 overflow: hidden; - 这应该可以容纳其中的 float 元素。