代码之家 › 专栏 › 技术社区 › Thomas Danecker

用CSS定位三个div

layout css html

Thomas Danecker · 技术社区 · 17 年前

谁喜欢谜语?;)

我有三个沙发:

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

我如何定义CSS样式(不接触HTML)将menu div定义为左列、右列的login div和右列但在login-div下面的content div。

每个分区的宽度是固定的,但高度不是。

2 回复 | 直到 9 年前

Chris Marasti-Georg Scott Weinstein 17 年前

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

为什么这样?菜单排在标记的最后,这使它变得很难。您还可以浮动内容和登录权限,并添加一个明确的:内容权限,但我认为这可能是您的最佳选择。如果看不到更大的情况,很难给出一个解决方案,在您的案例中肯定会起作用。

编辑:这似乎也有效:

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

更多的想法:如果你想让列在一个居中的布局中,那么绝对定位将不起作用(或者不起作用)。浮动似乎是有效的——只要您可以得到列之间的任何边界类型要求来使用浮动解决方案进行平移,那么您最好选择它。另外,如果站点应该保持对齐,我认为绝对方法可以很好地满足您的需求。

Community Mohan Dere 9 年前

飘走…不完美。 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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前