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

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

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

CSS位置以反转顺序水平划分

5 个答案: