我网站上的白色空间在哪里？

Question

我在http://galnanyheter.com/使用WordPress，出于某种原因，我的帖子之间有空格（见图片）。一直在查看我的主题的代码，并使用Firefox Web Developer附加组件，但无法找到它们的来源。

有人可以帮助我来自白空间的地方吗？

Answer 1

在<div>条文章的附近添加.entry2，并在其上设置column-count: 2;。然后从width移除height，float和.entry2。在演示中，我将它们设置为auto !important;以覆盖默认样式表。

演示：http://jsfiddle.net/ThinkingStiff/rBZFn/

HTML：

<div id="sub-content">

CSS：

#sub-content {
    column-count: 2;
    column-fill: balance;
    column-gap: 0;
    float: left;
    width: 640px;
}

.entry2 {
    width: auto !important;
    height: auto !important;
    float: none !important;
}

输出：

Answer 2

您的积木可能会浮动，浮动元素没有特定的高度，因为第一个元素高于第二个元素，它将看起来位于页面右侧的另一个元素下面。

要解决此问题，您可以选择在浮动元素上设置固定高度，即

.entry2 {
    float: left;
    height: 300px;
    margin: 0;
    padding: 0 25px 0 0;
    width: 295px;
}

或者您可能希望在每组2个浮动元素下面都有一个清除元素，即

<img style="float:left;"/><img style="float:left;"/>
<div style="clear:both;"> </div>

Answer 3

您在每个新闻项目上使用float:left，这会导致这种丑陋的行为（因为它们的高度不同，具体取决于新闻内容本身）。

我的解决方案是创建两个大div（每列一个），向左浮动它们然后将新闻项目堆叠在其中而不浮动，如下所示：http://jsfiddle.net/tdZ9S/2/