用css定位三个div

时间:2008-09-25 15:47:52

标签: html css layout

谁喜欢谜语? ;)

我有三个div:

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

如何定义CSS样式(不触及HTML)将menu-div作为左列,右栏中的login-div和右栏中的content-div,但登录下方 - 格。

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

2 个答案:

答案 0 :(得分:6)

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

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

<小时/> 编辑:这似乎也有效:

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

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

答案 1 :(得分:0)

漂浮......不完美。 Chris's answer似乎是一个更好的解决方案。

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