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。

Answer 2

尝试一些像这样的CSS：

#menu {
  float:left;
}
#content {
  float:right;
}
#footer {
  clear:both;
}

Answer 3

对它们中的每一个尝试 float:right; 。

Answer 4

我会在菜单和内容上进行浮动，然后在将宽度设置为 100% 后在页脚上清除两者。

Answer 5

你能改变 HTML 代码吗？如果可能的话，我会这样做：

<div id="wrapper">
   <div id="menu">
     <p>Blah</p>
   </div>
   <div id="content">
     <p>Blah</p>
   </div>
</div>
<div id="footer">
   <p>Blah</p>
</div>

并将其样式设置为：

#wrapper { overflow: hidden; }
#menu { float: left; width: 40%; /* Any size u want */ }
#content { float: left; width: 60%; /* Any size u want */ }

我猜你不能，因此你会问，那么我会按照其他人的说法做：

#menu { float:right; }
#content { float: left; }
#footer { clear: both; }