CSS浮动导致空白间隙

Question

CSS浮动导致空白间隙

csscss-float

3

我需要展示一组div，这些div的高度可能不同，但需要无缝连接在一起显示。以下是一个例子： Example divs

如您所见，当一个元素向左浮动并且位置相邻时会产生一个空白间隙，直到下一个浮动元素出现。反之则不会发生。我找不到解决方法，因为我使用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之间没有空白间隔？

- Indrek

1

你最终想要实现什么目标？ - Jared Farrish

我会考虑更改 JavaScript 而不是 CSS。 - wdm

A List Apart本月有一篇关于CSS浮动的文章。我建议阅读它。 - Moshe

根据Calum的示例，我正在尝试实现类似的功能：http://jsfiddle.net/cELff/8/ 如您所见，使用此示例时，当单击Float1时仍会出现间隙。我能想到的唯一解决方案是创建两个分离的div，将元素放入其中，但我更喜欢在每个元素中保留位置数据。 - Indrek

3个回答

2

似乎切换float:left;和float:right;可以达到你想要的效果：http://jsfiddle.net/cELff/1/ 尝试使用display: inline-block代替float:left。

- Calum

只有当您知道所有盒子的大小时，才能使用此方法。如果要动态地像这样堆叠它们，则需要使用JavaScript。 - Rudie

是的，我曾经使用过一个 jQuery 插件，它可以做到所有这些，但现在我找不到它了。 - Calum

瀑布流看起来很酷，但是...在我的示例中，“扩展”部分实际上是通过 slideDown() 显示出来的。使用 Masonry 的方法是在 slideDown 回调中调用 .masonry()，但这会削弱效果，并且由于某些原因会将所有项目都放入一列中。由于我不想失去效果，所以我想我必须找出如何在过滤掉一些 divs 后重新排列所有元素为左右浮动的两列。（正如 Calum 和 jeroen 建议的那样）。 - Indrek

2

感谢您阅读这篇旧文章，对于那些像我一样在搜索中找到它的人（如此之多）。

空格的原因是高度问题。尝试在浮动项目上设置高度。

- Rob Sedgwick

不能在所有浮动元素上设置固定高度，这是不可能的。 - EpicVoyage

同意。只是问题中没有说不能使用高度。 - Rob Sedgwick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeroen · Accepted Answer

在您的示例中，可以使用float:left来处理不均匀的块，使用float:right来处理偶数个块，但通常情况下，仅使用css是不可能实现的。您需要javascript或2个单独的列（或组合...）。由于您已经在使用javascript，因此很容易将所有可见块加载到数组中并分成两列。