CSS 以相反的顺序水平放置 div答案

【问题标题】：CSS Position Divs Horizontally in Reversed OrderCSS 以相反的顺序水平放置 div
【发布时间】：2010-01-02 08:30:24
【问题描述】：

我有一个看起来像

的文档

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

你如何交换他们的订单？而且我宁愿不使用绝对定位。

【问题讨论】：

标签： css positioning

【解决方案1】：

试试这样的css：

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

【讨论】：

由于某种原因，这在歌剧中的菜单和内容之间留下了一个未指定的小间隙。可能是一个错误，但仍然。

【解决方案2】：

尝试float:right;。

【讨论】：

您还需要为内容 div 添加固定宽度，以防止左边框随着内容的变化而移动。
或相对 % 也可以。菜单：30%，内容：70%，页脚：100%

【解决方案3】：

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

另一种方法是：

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

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

【讨论】：

您的情况基本上是相对定位的用途，即相对于它们通常所在的位置移动元素。 “右”移动元素，使其最右边缘是其左边缘通常所在位置左侧的像素数。 “左”反之亦然，仍然从它的左边缘通常所在的位置移动。

【解决方案4】：

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

【讨论】：

【解决方案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; }

【讨论】：