问题清楚:对;

时间:2010-04-27 19:18:11

标签: css xhtml

我对此页面http://www.gwynfryncottages.com/news.php

有疑问

.blog-footer div需要在右侧清除以更正图片的高度,以便明确:右;导致FF和IE页面上出现巨大差距。

我很茫然,我已经尝试了很多想法来解决这个问题,而且此时我已经盯着它看了太长时间才能清楚地看到这个问题。任何人都可以帮助我。

提前致谢。

2 个答案:

答案 0 :(得分:0)

尝试使用定位。添加这些以帮助您入门:

#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}

有一些细微之处,比如当内容整体不足以推倒页脚时获得正确的行为,但我发现这些比浮动问题更容易解决。使用像你这样的固定高度的页脚,使用页面底部的底部边距和页脚的更多绝对定位很容易修复。你可以使用额外的div和gobs。

答案 1 :(得分:0)

clear属性相对于浮动元素有效。因此,您可以使用它来确保页脚关闭图片下方的div,但是您的侧边栏浮动的事实实际上会将内容向下移动到侧边栏的底部。

因此,正如@Nicholas Wilson所提出的,一个解决方案是使用浮动以外的方式来定位侧边栏。并且您的布局似乎并不需要浮动侧边栏。

在另一个方向,我注意到您目前正在硬编码图片的高度。既然你知道这些高度,另一种可能性就是忘记博客页脚的clear:right,并在资产体中添加min-height属性,如(这是为啤酒节)

<div class="asset-body" style="min-height:184px;">

当然不优雅或干,但如果你不得不这样做或有javascript这样做。