2-COL 1-COL響應式設計佈局

Question

我想從2山坳佈局走在桌面上像這樣：

向1山坳佈局上移動，像這樣：

我有麻煩容器＃5到桌面上的正確位置。我的標記（修改brievity）是像這樣（這是可以改變到什麼）：

<div id="container-1></div> 
<div id="container-2></div> 
<div id="container-3></div> 
<div id="container-4></div> 
<div id="container-5></div> 

在桌面上：＃1和＃5向左浮動，其餘的都是浮動的權利。但是這導致＃5位於＃4（＃5與＃4頂部對齊）旁邊的位置，而不是在＃1之下。我認爲它應該工作。我在這裏錯過了什麼嗎？

PS：所有集裝箱的高度是流體

Answer 1

嘗試在一個額外的容器包裝，中間3和包裝這一點。

<div id="container"> 
    <div id="container-1">content content content content content content </div> 
    <div id="containerwrapper"> 
     <div id="container-2">content content content content content content </div> 
     <div id="container-3">content content content content content content content content content content content content </div> 
     <div id="container-4">content content content content content content content content content content content content </div> 
    </div> 
    <div id="container-5">content content content content content content </div> 
</div>​ 

和CSS：

#container { background: none; float: left; width: 340px; } 
div { margin: 10px; margin-bottom: 0; background: #0f0; } 
#container-1 { float: left; width: 60px; } 
#containerwrapper { background: none; float: right; margin: 0; } 
#container-2 { width: 240px; } 
#container-3 { width: 240px; } 
#container-4 { width: 240px; } 
#container-5 { float: left; width: 60px; }​ 

你可以看到它在這裏：http://jsfiddle.net/GcYuh/