css - 在广阔的内容空间中漂浮在几个块上

Question

对于我当前的项目，我必须向左浮动几个街区。我的内容块是 720px 宽，而块是 350px 宽。但不知何故，他们没有相互浮动。其中一些有，一些没有。在每个块中，我添加了规则 float:left。我会用手漂浮它们，但我不知道积木的顺序，所以无法预测它的外观；这是它现在看起来如何的屏幕截图：http: //d.pr/i/OKpc

Answer 1

如果我正确理解您的问题，这里有几个不同的解决方案。首先，您可以使用一些现代选择器添加clear: left到每个偶数块：

.block-views:nth-child(2n+1) { clear: left; }

这在 Internet Explorer 8 或更低版本中不起作用。

下一个解决方案涉及clear: both在每隔一个块之后添加一个额外的 div：

HTML：

<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>

CSS：

.clear { clear: both; }