所以我一直在努力使两个div并排在一起而不重叠。我有一个div将被修改为边栏和右div作为内容。希望有人可以帮助我。
HTML：
<div id="wrapper">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
CSS：
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;
}
解决方法
这个答案可能需要根据你想要实现的位置来修改：fixed;如果你想要的是两列并列，那么只需执行以下操作：
我只是把两列悬在左边。为了说明的目的，我为每列添加了最小高度。
HTML
<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>
CSS – 你会注意到我简化了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;
}
如果您希望左列保持原样，请滚动以下操作：
在这里，我们将正确的列向右移动，同时添加position：relative;到#wrapper和位置：固定;到#leftcolumn。我再次使用最小高度进行说明，可以根据您的需要进行删除。
CSS
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;
}
