CSS 以相反顺序水平放置 Div

Question

我有一个看起来像这样的文档

<div id="content">
   <p> blah </p>
</div>

<div id="menu">
   <p> blah2 </p>
</div>

<div id="footer">
   <p> Copyright </p>
</div>

内容div位于菜单div之后，但是否可以像这样显示布局:

-------------------
| Menu  | Content |
|       |         |
|       |         |
-------------------
| Footer          |
-------------------

如何交换他们的顺序？我宁愿不使用绝对定位。

Answer 1

float:right/float:left 解决方案的一个问题是您必须处理的元素之间的间隙，以及额外的容器 div。

另一种方法是:

#content, #menu{
  position: relative;
  float: left;
}
#menu    { right: 500px; }
#content { left: 100px; }
#footer  { clear: both; }

其中500px是内容的宽度，100px是菜单的宽度。该解决方案需要相对定位和固定宽度的 div。