Wordpress:大空(?)空白区域

时间:2012-05-26 23:54:11

标签: wordpress containers space

我的网站网址:http://piquantblog.com

认为它不会再困扰我,我给了我的容器一个固定的高度,因为我无法弄清楚你在内容页面下方和页脚上方看到的巨大空白区域的原因。显然,当我开始编写帖子页面时,这最终会干扰我的布局。

现在我已经完成了所有可能的容器高度:auto和我似乎无法找到大量空白区域的原因。这个空间在Chrome和Firefox中均可见,因此它似乎不是浏览器问题。

任何想法??

2 个答案:

答案 0 :(得分:0)

chrome,右键单击空格,检查此元素。你现在可以生活编辑为html所有元素和css属性,直到你找到解决方案。 当你发现它编辑你的css和核心文件来解决它

答案 1 :(得分:0)

你的问题是相对定位。

我检查了你的代码,#container元素中的所有元素都使用负顶部/左侧坐标和相对位置定位。

每当你使用相对定位时,你应该想象应该被元素占据的空间仍然被占用,位置坐标只是将元素的可视化移动到别处。

如果你将这些元素的高度加起来总共为460 + 620 + 6 * 300 = 2880px。

为了以灵活的方式获得您想要的结果,您应该只对元素使用 float:left ,确保所有元素都有明确定义的宽度(这很重要)并且最好是高度(但它并不重要)。

使用< br style =“clear:both”/>

完成元素列表

这是一个经典的菜鸟错误。使用相对产生额外的间距,使用固定/绝对使设计变得僵硬,使用浮动允许灵活性并避免空间。

TL; DR

删除职位:亲戚; 顶部:NNpx ; #container中的所有项目 left:NNpx ,例如#post-16,然后对#container中的所有项目使用 float:left

你必须调整边距/填充等,以便在应用浮动后调整元素的距离。