html - CSS - 如何在另一个 div 内将一个元素浮动到右侧？

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;
}

小提琴。

Answer 1

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

小提琴

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

Answer 2

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

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

或阅读有关clearfix

Answer 3

这是带有更新 css的更新小提琴链接。您只需要添加溢出：隐藏和高度：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

我总是使用这个站点的 CSS clearfix 。这是解决这个问题的最合适的方法。只需将 .wrapper 的类属性设置为“wrapper clearfix”

.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 的高度。.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%;
}