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

为什么这样？标记中最后的菜单使其变得艰难.您也可以将内容和登录权限都浮动,并添加一个明确的内容权利,但我认为这可能是您最好的选择.如果没有看到更大的图景,很难提供一个肯定适用于您的解决方案.

编辑:这似乎也有效:

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

更多想法:如果您希望将列放在居中的布局中,绝对定位将无效(或无法正常工作).浮动似乎可以工作 - 只要你可以通过浮点解决方案获得任何边界列之间的类型要求,你可能最好选择它.然后,如果该网站应该保持对齐,我认为绝对方法可以很好地满足您的需求.