Html CSS布局填充缺少的空间

我有一个奇怪的CSS问题。 这很好地说明了这一点

HTML:

我不明白为什么较低的div会消耗较高div之间的余量。 我希望它只使用上面两列下面的“行”

尝试了几种不同的定位和“巫术”，但没有任何帮助

有什么想法吗

---

谢谢。

您需要在自己的行中清除所需的元素，请参阅fiddle:

或CSS：

.container {
    clear: both;
    width: 640px;
    margin: 0 auto;
}
.leftBox {
    width: 340px;
    float: left;
}
.rightBox {
    width: 300px;
    float: left;
}
.innerWrapper {
    width: 300px;
}

在

容器div内的html中使用

在css中使用
.clear{clear:both；}

HTML:

<div class="container" style="text-align: left;">
    ...
    <div class="clear"></div>
</div>

您可以将innerWrapper更改为100%

.innerWrapper {
    width: 100%;
}

这似乎奏效了

怪异
或者将“
清除：这两个属性都提供给“.container”类，该类是较旧的方法

见小提琴：*

或者对“.container”类使用新的解决方案“
溢出：隐藏；”属性

参见小提琴：
为什么不通过使
宽度为320px来缩小左右之间的间隙

参见小提琴：

<div class="container" style="text-align: left;">
    ...
    <div class="clear"></div>
</div>

或者，您可以向容器添加如下高度
height:20px这将消除空间中的红色

请参见小提琴：
FYI:。键没有保留默认值
溢出：可见
。接受此答案，因为清除保留边距（同时将宽度设置为100%扩展左上div）。Thanks我需要使用上div的边距和填充，所以我需要将行“放置”在上div的正下方。否则，我需要计算距页面顶部的距离和上方div的高度。谢谢谢谢，但我需要保持上两个div之间的间距。
.clear{clear:both;}

.innerWrapper {
    width: 100%;
}

<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>