如何使用具有固定位置div的浮动,清除和溢出元素并排对齐两个div

Question

所以我一直试图将两个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>

Answer 1

这个答案可能需要根据您尝试实现的目标进行修改position: fixed;.如果您想要的是两列并排,请执行以下操作:

http://jsfiddle.net/8weSA/1/

我将两列向左浮动.

注意: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>

如果您希望在滚动时左列保持原位,请执行以下操作:

http://jsfiddle.net/8weSA/2/

在这里,我们漂浮在右列的权利,同时增加position: relative;对#wrapper和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>

Answer 2

试试这个:

<div id="wrapper">
    <div class="float left">left</div>
    <div class="float right">right</div>
</div>

#wrapper {
   width:500px; 
   height:300px; 
   position:relative;
}

.float {
   background-color:black; 
   height:300px; 
   margin:0; 
   padding:0; 
   color:white;
}

.left {
   background-color:blue; 
   position:fixed; 
   width:400px;
}

.right {
   float:right; 
   width:100px;
}

jsFiddle:http://jsfiddle.net/khA4m