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;}

这里有一个关于右侧浮动蓝色div的问题的截图：
_{(来源: imagesup.net)} 这是JSFiddle中的示例链接：JSFiddle。

- Athapali

---

请提供完整的代码示例，包括HTML。 - j08691

你要么把蓝色容器放在绿色容器后面，要么你的边距、轮廓、边框和宽度之和大于外部容器的宽度。 - Zeta

你代码中的颜色是黄色、绿色、红色和黑色。哪一个应该是蓝色的？ - Quentin

Answer 1

重新排列您的HTML：

<div id="wrapper960"  style="min-height:350px; border:1px red solid">
<div class="content-sidebar-r"style="min-height:250px; border:1px black solid"></div>
<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>​

jsFiddle示例

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

- j08691

Answer 2

您没有任何代码可以使蓝色div在绿色div旁边浮动。

例如：

.content { float: left; }

- Quentin