在另一個div列下浮動div列

我在主容器內有4個容器，並嘗試使用它創建一個佈局。在另一個div列下浮動div列

前3個容器向左漂浮並按預期工作。第4個容器需要直接在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; 
}

來源

2014-02-22 user1050619

我沒有看到一個4容器中的提琴.. – Sebsemillia

我已經添加了它.. – user1050619

穿戴容器2，容器3，容器4中的包裝的div。然後：

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

來源

2014-02-22 17:44:12

很簡單包裹在div裏面的DIV（3,4）

LIVE WORKING LINK

CSS HTML，身體{ 高度：100％; 寬度：100％; /background-color：#AFEEEE;/ background-color：white; } ＃main-container { height：50％; 寬度：100％; } ＃container1 { height：80％; 寬度：20％; background-color：grey; float：left;

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

活生生的例子：

來源

2014-02-22 17:47:08

添加float: right您#container4。 SEE THE DEMO

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

，並從中刪除clear: both。

來源

2014-02-22 17:49:01 Morven

你需要用Div 2Div 3和Div 4一個Div的內部和CSS設置Div的屬性float:left;。然後，他們將全部被旁邊Div 1

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

CSS

#float-left{ 
float:left; 
}

來源

2014-02-22 17:49:25

使用此CSS修復您#container4：

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

來源

2014-02-22 19:31:30 jbakker

在另一個div列下浮動div列

回答

相關問題