Css 如何消除.blog页脚中的巨大差距?

Css 如何消除.blog页脚中的巨大差距?,css,xhtml,Css,Xhtml,我跟你有点问题 需要清除右侧的.blog footer div以更正图片的高度:清除;导致在FF和IE中页面上出现巨大的间隙 我不知所措,我尝试了很多方法来回避这个问题,现在我盯着这个问题看得太久了,看不清楚这个问题。有人能帮我吗 提前感谢。尝试使用定位。添加以下内容以开始: #page-body {position: relative; width: 740px; margin-left: 20px;} #sidebar {position: absolute; right:-190px;}

我跟你有点问题

需要清除右侧的.blog footer div以更正图片的高度:清除;导致在FF和IE中页面上出现巨大的间隙

我不知所措,我尝试了很多方法来回避这个问题,现在我盯着这个问题看得太久了,看不清楚这个问题。有人能帮我吗


提前感谢。

尝试使用定位。添加以下内容以开始:

#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
有一些微妙之处,比如当内容作为一个整体不够长,无法向下推页脚时,获得正确的行为,但我发现这些问题比浮动问题更容易解决。对于像您这样的固定高度的页脚,使用页面正文上的底部边距和页脚的一些更绝对的位置可以很容易地解决这个问题。您可以使用一个接一个的额外div。

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

因此,正如@Nicholas Wilson所建议的,一种解决方案是使用浮动以外的方法定位侧边栏。您的布局似乎并不真正需要侧边栏浮动

在另一个方面,我注意到您目前正在对图片的高度进行硬编码。既然您知道这些高度,另一种可能是忘记blog footer的clear:right,并向资产主体添加一个minheight属性,就像啤酒节一样

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

当然不是优雅或干燥,但是,如果必须这样做,您可以这样做,或者让javascript这样做。

一个完全不方便的解决方案是将页面内容向左浮动,而不是将侧栏向右浮动。此外,尽管不一定是一个解决方案,但编码侧栏使其位于内容之后,然后向右浮动可能对内容的影响较小。