css - 2-col 到 1-col 响应式设计布局

Question

我正在尝试从桌面上的 2-col 布局开始，如下所示：

像这样在 Mobile 上进行 1-col 布局：

我无法将容器 #5放到桌面上的正确位置。我的标记（为简洁而修改）是这样的（可以更改为任何内容）：

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