将一个div列浮动到另一个div列下

Question

我在一个主容器中有4个容器，并试图使用它创建一个布局。

前3个容器漂浮在左侧，并按预期工作。第四个容器需要直接显示在container-3下，但仅在container-2的长度之后显示。

我怎么才能修复它？

Jsfiddle：

http://jsfiddle.net/prem1980/4D7ZS/10/

css

<div id ="main-container">
<div id = "container1">
    container 1
</div>
<div id = "container2">
    container 2
</div>
<div id = "container3">
    container-3
</div>
<div id = "container4">
    container-4
</div>

</div>

css

html, body{
    height: 100%;
    width:100%;
    /*background-color:#AFEEEE;*/
    background-color:white;
}
#main-container{
    height:50%;
    width:100%;
}
#container1{
    height:80%;
    width:20%;
    background-color:grey;
    float:left;

}
#container2{
    height:90%;
    width:70%;
    background-color:blue;
    float:left;
}

#container3{
    height:60%;
    width:10%;
    background-color:green;
    float:left;

}
#container4{
    height:20%;
    width:20%;
    background-color:yellow;
    clear:both;
}

Answer 1

将float: right添加到您的#container4。

#container4{
   height:20%;
   width:10%;
   background-color:yellow;
   float: right;
}

并从其中删除clear: both。

Answer 2

将container-2，container-3，container-4放入包装器div。然后：

.wrapper-div {
float: left;
width: 500px;
}

Answer 3

它简单地将div(3,4)包装在div中

LIVE WORKING LINK

CSS html，body{高度: 100%；宽度:100%；/背景色：#AFEEEE；/背景色:白色；}#主容器{高度:50%；宽度:100%；}#容器1{高度:80%；宽度:20%；背景色:灰色；浮动:左；

}
#container2{
    height:90%;
    width:70%;
    background-color:blue;
    float:left;
}
a.34{
     width:10%;
    float:left;
}
#container3{
    height:60%;
    width:10%;
    background-color:green;
    float:left;

}
#container4{
    height:20%;
    width:10%;
    background-color:yellow;
 float:left;

}

HTML

<div id ="main-container">
<div id = "container1">
    container 1
</div>
<div id = "container2">
    container 2
</div>
<div class="a34">   
<div id = "container3">
    container-3
</div>
<div id = "container4">
    container-4
</div>
</div> 
</div>

CSS

现场示例：