Question

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

前3个容器向左浮动并按预期工作。第4个容器需要直接显示在container-3下，但只能在容器-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。 SEE THE DEMO

#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％; } ＃container1 { 高度：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

现场例子：

Answer 4

您需要将Div 2 Div 3和Div 4包裹在一个Div中，并将Div的属性设置为{{1}在float:left;中。然后他们都会在CSS

旁边

Div 1

CSS

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

</div>

Answer 5

对#container4使用此CSS修补程序：

position:relative;
top:-30%; /* 30% is the height difference between #container2 and #container3 */
width:10%; /* Set it equel to the width of #container3 */

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

5 个答案: