Question

谁喜欢谜语？ ;）

我有三个div：

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

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

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

Answer 1

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

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

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

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

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

Answer 2

漂浮......不完美。 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>

用css定位三个div

2 个答案: