二次至一次响应式设计布局

Question

我正试着从桌面上的二次布局开始，如下所示：

​

​

移动设备上的一种布局方式如下：

​

​

我很难让容器#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/