html - 用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不是。

Answer 1

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

为什么这样？标记中最后出现的菜单使它变得困难。您可能还可以浮动内容和登录权，并添加一个 clear:right 内容，但我认为这可能是您最好的选择。如果没有看到更大的图景，很难给出一个绝对适用于您的情况的解决方案。

---

编辑：这似乎也有效：

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

---

更多想法：如果您想让列处于居中布局，则绝对定位将不起作用（或无法正常工作）。浮动似乎有效 - 只要您可以获得任何列之间的边界类型要求以使用浮动解决方案，您最好选择它。再说一次，如果该站点应该左对齐，我认为绝对方法可以很好地满足您的需求。

Answer 2

飘走……不完美。 克里斯的回答似乎是一个更好的解决方案。

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