使用CSS定位三个div

Question

我有三个 divs：

<div id="login" />
<div id="content" />  
<div id="menu" />  

我该如何定义CSS样式（不更改HTML），使得menu-div作为左列，login-div在右列，content-div也在右列但在login-div下方。每个div的width是固定的，但height没有限制。

- Thomas Danecker

Answer 1

#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}

为什么要这样做？在标记中放置菜单最后会使它变得困难。您可能还可以将内容和登录都向右浮动，并为内容添加clear:right，但我认为这可能是您最好的选择。如果没有看到更大的图片，很难给出一种在您的情况下绝对有效的解决方案。

---

编辑：这似乎也可以起作用：

#content, #login {
  float:right;
  clear:right
}

---

更多想法：如果您想在居中布局中拥有列，绝对定位将无法使用（或效果不佳）。浮动似乎是可行的——只要您能够通过浮动解决任何列之间边框的要求，那么选择这种方法可能更好。另一方面，如果网站应该是左对齐的，我认为绝对定位方法非常适合您的需要。

- Chris Marasti-Georg

---

非常感谢！我使用了浮动方法。内容div中的clear:right对我很有帮助。 - Thomas Danecker

Answer 2

飘走了……不完美。Chris的回答似乎是更好的解决方案。

#login {
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#content {
  clear: right;
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#menu {
  float: left;
  width: 400px;
  border: 1px solid #f00;
}

<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>

- enobrev