div 不浮动

Question

为什么蓝色 div 不与绿色 div 相邻？

这是 html。除了带边框的容器之外什么都没有。

<div id="wrapper960"  style="min-height:350px; border:1px red solid">
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div>
<div class="content" style="min-height:250px; border:1px green solid"></div>
<div class="content-sidebar-r"style="min-height:250px; border:1px blue solid"></div>

</div>

这是中间居中 div 的 CSS。

#wrapper960 {margin:0 auto; padding:0; width:960px;}

.content-sidebar-l {
  float: left; 
  width:170px; 
  margin:0; 
  padding:0;}
.content {
  margin:0 auto; 
  padding:1em 0 0 0; 
  width:610px; 
  background-color:#fff;}
.content-sidebar-r {
  float: right;
  width:160px; 
  margin:0; 
  padding:0;}

_{（来源：imagesup.net）}

这是在JSFiddle 中

Answer 1

将 HTML 重新排序为：

\n\n

<div id="wrapper960"  style="min-height:350px; border:1px red solid">\n<div class="content-sidebar-r"style="min-height:250px; border:1px black solid"></div>\n<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div>\n<div class="content" style="min-height:250px; border:1px green solid"></div>\n</div>\xe2\x80\x8b\n

\n\n

jsFiddle 示例

\n\n

您需要首先将侧边栏浮动到右侧，否则将其放在最后，它就无法浮动到也浮动之前的元素上方。

\n