CSS float导致空格

Question

我必须以无缝顺序显示div列表，认为它们的高度可能会有所不同。 这是一个例子：

正如您所看到的，当一个元素浮动到左边并且位于另一个浮点旁边时，它会生成一个空格，直到下一个浮点数。反过来不会发生这种情况。我似乎无法找到解决方法，因为我使用javascript来过滤掉某些元素（div）我无法创建两个不同的列。

这是html / css：

<div style="width: 200px;">
        <div style="float: left; width: 50%; background-color: green;">
            <p>Float1</p>
        </div>
        <div style="float: left; width: 50%; background-color: blue;">
            <p>Float2</p>
            <p>expanded</p>
        </div>
        <div style="float: left; width: 50%; background-color: yellow;">
            <p>Float3</p>
            <p>expanded</p>
        </div>
        <div style="float: left; width: 50%; background-color: gray;">
            <p>Float4</p>
        </div>
        <div style="float: left; width: 50%; background-color: red;">
            <p>Float5</p>
        </div>
    </div>

任何想法如何让它看起来以便Float1和Float3之间没有空房间？

Answer 1

在您的示例中，可能可以使用float:left表示不均匀的块，float:right表示偶数块，但通常只使用css是不可能的。您将需要javascript或2个单独的列（或组合......）。

当你使用javascript时，在数组中加载所有可见块并将它们分成两列非常容易。

Answer 2

似乎切换float:left;和float:right;符合您的要求：http://jsfiddle.net/cELff/1/

尝试使用display: inline-block代替float: left。

Answer 3

欣赏这个q是旧的，对于在搜索中找到这个的人（就像我在搜索）。

空间的原因是高度。尝试在浮动物品上设置高度。