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

试试这样的css：

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

Answer 2

试穿float:right;他们每个人。

Answer 3

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

另一种方法是：

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

Where 500px is the width of the content, and 100px is the width of the menu. That solution requires relative positioning and fixed width divs.

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; }