html - 用css定位三个div

Question

我有三个div:

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

我将如何定义 CSS 样式(不触及 HTML)以将 menu-div 作为左列，将 login-div 作为右列，以及content-div 也在右栏中，但在 login-div 下方。

每个 div 的宽度是固定的，但高度不是。

Answer 1

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

为什么这样？标记中最后出现的菜单使其变得困难。您也可以 float 内容和登录权，并向内容添加明确的:权利，但我认为这可能是您最好的选择。如果不看大局，就很难给出绝对适用于您的情况的解决方案。

---

编辑:这似乎也有效:

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

---

更多想法:如果您想让列居中布局，则绝对定位将不起作用(或效果不佳)。 float 似乎有效——只要您可以通过 float 解决方案获得任何列间边界类型要求，您最好选择它。话又说回来，如果站点应该保持对齐，我认为绝对方法可以很好地满足您的需求。