Question

我有一个div，在div中我有两个较小的，其中一个在左边，另一个在右边，但是父div的宽度没有增加，我怎么能做到它呢？

当div的内部变大时，我希望红色div增加高度。

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer">
    </div>
</div>

.wrap{
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
}

.left{
    width:450px;
    height:100px;
    background:blue;
    float:left;
}

.right{
    width:450px;
    height:100px;
    background:green;
    float:right;
}

.footer{
width:100%;
height:100px;
background:#000;
}

Fiddle

Answer 1

将以下规则添加到.wrap类overflow: auto;

<强> FIDDLE

.wrap{
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
    overflow: auto; /* <-- here */
}

Answer 2

您可以在第二个div之后添加：

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

或阅读clearfix

Answer 3

以下是更新过的fiddle link及更新的css。你只需要添加overflow：hidden和height：100％;在.wrap课程中。

.wrap {
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
    overflow: hidden;
    height: 100%;
}

Answer 4

.wrap:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

Answer 5

我总是使用this site中的CSS clearfix。这是解决此问题的最恰当方式。只需将.wrapper的class属性设置为＆＃34; wrapper clearfix＆＃34;

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Answer 6

将父div的高度设置为inherit。 .wrap div的高度现在将根据内部内容进行扩展：

.wrap
{
 margin:auto;
 width:960px;
 height:inherit;
 background-color:red;
}

Answer 7

现在当你增加左或右div的高度时，主div高度也会增加。

.wrap {
margin: auto;
width: 960px;
min-height: 50px;
background: red;
overflow: hidden;
height: 100%;
}

CSS - 如何在另一个div内向右浮动一个元素？

7 个答案: