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

I use WordPress on http://galnanyheter.com/ and for some reason, I get white space between my post (see picture). Have been looking into the code of my theme, and used the Firefox Web Developer add-on but can not find where they come from.

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

Someone who can help me where the white spaces will come from?

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

4 个解决方案

#1

your blocks are probably floated left with no specific height on the floated elements and as the first element is higher than the second it will appear to sit under the other one on the right of the page.

您的块可能会浮动，浮动元素上没有特定高度，并且第一个元素高于第二个元素，它将显示为位于页面右侧的另一个元素下面。

To fix the issue you might choose to set a fixed height on the floated elements ie

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

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

Or you may wish to have a clearing element beneath each set of 2 floated elements ie

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

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

#2

Add a <div> around your block of .entry2 articles and set column-count: 2; on it. Then remove width, height, and float from .entry2. In the demo I set them to auto !important; just to override the default stylesheet.

在你的.entry2文章块周围添加一个

并设置column-count：2;在上面。然后从.entry2中删除width，height和float。在演示中，我将它们设置为auto！important;只是为了覆盖默认的样式表。

Demo: http://jsfiddle.net/ThinkingStiff/rBZFn/

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

HTML:

HTML：

<div id="sub-content">

CSS:

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;
}

Output:

输出：

#3

You are using float:left on each news item, which causes this ugly behaviour (as they are of different height, depending on the news content itself).

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

My solution would be to create two big divs (one for each column), float them left and then stack the news items inside them without floating, like so: http://jsfiddle.net/tdZ9S/2/

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

#4

The floated elements need to be of same height in order to align properly (see reference: the 'float' property, rule number 2 and 8 in particular).

浮动元素需要具有相同的高度才能正确对齐（参见参考：'浮动'属性，特别是规则编号2和8）。

Now, you have constrained the max-height on .post2 but the heading entry2 h2 may span one, two or more lines. This causes the heights of adjacent .entry2 elements to vary and hence the problem.

现在，您已限制.post2上的最大高度，但标题entry2 h2可能跨越一行，两行或更多行。这导致相邻的.entry2元素的高度变化，从而导致问题。

Solution: try adding a fixed height to .entry element.

解决方案：尝试为.entry元素添加固定高度。