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

我在http://galnanyheter.com/上使用WordPress，由于某种原因，我在我的帖子之间留下了空白（见图片）。一直在研究我的主题代码，并使用Firefox Web Developer插件，但无法找到它们来自哪里。我的网站上的白色空间来自哪里？

有人谁可以帮助我的空间来自哪里？ enter image description here

来源

2012-01-16 Xtreme

我认为这是一个事的CSS .... – DonCallisto 2012-01-16 10:06:21

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

要解决你可以选择设置一个固定的高度上浮动元素，即

.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>

来源

2012-01-16 10:06:53 Treemonkey

固定的高度和清除元素将创建一个表格外观，在一些新闻项目之间有许多不需要的空白 - 取决于当然的大小。 – 2012-01-16 10:11:10

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

我的解决方案是创建两个大的div（每列一个），浮动他们离开，然后堆在他们里面的新闻项目，而不浮，就像这样：http://jsfiddle.net/tdZ9S/2/

来源

2012-01-16 10:06:20

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

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

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

来源

2012-01-16 10:14:12

添加一个<div>围绕您的.entry2块的文章和设置column-count: 2;就可以了。然后从.entry2删除width,height和float。在演示中，我将它们设置为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; 
}

输出：

enter image description here

来源

2012-01-16 10:44:15 ThinkingStiff

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

回答

相关问题