所以我一直在尝试将两个 div 并排对齐而不重叠。我有一个 div 将固定为侧边栏,右侧的 div 作为内容。希望有人能帮助我。
body {
background-color: #444;
margin-top: 0;
margin-bottom: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
padding: 0;
overflow: auto;
}
#leftcolumn {
width: 250px;
background-color: #111;
padding: 0;
margin: 0;
display: block;
border: 1px solid white;
position: fixed;
}
#rightcolumn {
width: 750px;
background-color: #777;
display: block;
float: left;
border: 1px solid white;
}
<div id="wrapper">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
最佳答案
这个答案可能需要修改,具体取决于您试图通过 position: fixed;
实现的目标。如果您只需要并排两列,请执行以下操作:
我将两列都向左浮动。
注意:出于说明目的,我向每一列添加了 min-height
并简化了您的 CSS。
body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: 1px solid white;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
}
#rightcolumn {
width: 750px;
background-color: #777;
}
<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>
如果您希望左栏在滚动时保持原位,请执行以下操作:
这里我们在#wrapper
中添加position: relative;
,在中添加
.position: fixed;
,同时将右列向右浮动>#leftcolumn
注意:我再次使用 min-height
进行说明,您可以根据需要将其删除。
body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
position: relative;
}
#leftcolumn,
#rightcolumn {
border: 1px solid white;
min-height: 750px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
min-height: 100px;
position: fixed;
}
#rightcolumn {
width: 750px;
background-color: #777;
float: right;
}
<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>
关于css - 如何使用具有固定位置 div/的 float、clear 和 overflow 元素并排对齐两个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18344904/