Question

有父块：

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

我需要2个街区：

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

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

Answer 1

这是因为#content中的两个div都被浮动，将它们从正常的文档流中取出。在#content上，将height: 100%;更改为overflow: hidden; - 这应该可以容纳其中的浮动元素。

Answer 2

您可能需要添加：

  display:inline;

到div。

另外，仔细检查父div中是否有足够的空间。每个浏览器以不同方式计算也就是说，为了使两个div并排出现，必须有足够的空间来考虑它们的宽度和边距等。

HTML - 与divs的麻烦

2 个答案: