Question

我有一个名为<div>的{{1}}，其中包含2个"bottom"。内部的divs divs是"manufacturers"和"main"，它们彼此并排放置。我想要的是，当两个分区扩展时<div id="bottom">必须自动调整大小（<div id="main">列出所有可用产品，这也是它具有自动高度的原因）。问题是，当我在float和"display: inline" div中使用main属性或manufacturers属性时，它会覆盖bottom div，导致它不会展开

这是我的css代码：

#bottom{
    padding: 1.5em;
    margin: auto;
    margin-top: 3.7em;
    margin-bottom: 5em;
    background-color: white;
    width: 67em;
    height: auto;
}
#manufacturers{
    padding: 1em;
    width: 13em;
    height: auto;
    border: 1px solid #CFCFCF;
    font-size: 17px;
    float: left;
}
#main{
    float: right;
    padding: 0.5em;
    width: 47em;
    height: 10em;
    background: blue;
    position: relative;
    display: inline;
}

Answer 1

#main{
display: inline-block;
}

Answer 2

你可以试试这个：

#bottom{
    width: 100%;
}
#manufacturers{
    width: 50%;
}
#main{
    width: 50%;
}

在现有的CSS样式表中添加以上css属性。除此之外：

向下展开以适应内容是预期的行为。如果你已经在你的风格的某个地方指定了浮动，你可能需要清除它们。

<div style="clear:both"></div>

Answer 3

在你的case元素中，ID为＃34; bottom＆＃34;因内部元素有浮动（左或右）而崩溃。您应该在#bottom：

中使用clearfix类

.clearfix: before,
.clearfix: after {
    display: table;
    content: " "
}
.clearfix: after {
    clear: both
}

回答有关"clearfix"

的问题

Div中的自动重新调整大小不起作用

3 个答案: