css - 页面两侧的 DIV 元素之间有空格

Question

我想创建两列 div 元素，一列 float 在左侧，一列 float 在右侧。我希望所有左边的都堆叠在一起，右边的也一样。但是，我看到右侧列中的 div 之间的空间似乎来自左侧列的高度。我怎样才能在中间没有空格的情况下布置它？例子是 http://jsfiddle.net/acugV/

<style type="text/css">
div {
    width: 50px;
    outline: 1px dashed #666
}
.left {
    float: left;
    clear: left;
    background: yellow
}
.right {
    float: right;
    clear: right;
    background: #0f0
}
</style>
<div class="left" style="height:75px"></div>
<div class="right" style="height:50px"></div>
<div class="left" style="height:50px"></div>
<div class="right" style="height:50px"></div>

Answer 1

最简单的方法是围绕 float 的 div 创建一个容器，而不是让每个容器独立 float 。

<div class="left">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<div class="right">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

http://jsfiddle.net/acugV/5/