0

我遇到了一个问题,我在页脚上方的 div 中设置了最小高度。为了使页脚中的文本居中对齐,我在 CSS 中使用 clear:both。唯一的问题是现在内容和页脚之间有很大的空间?

这是我正在开发的网站:http: //brimbar.com/no_crawl/RiverHollow/about.html

谢谢!

4

2 回答 2

0

这是因为你有巨人的浮动图像margin-bottomclear: both表示“该元素的任何一侧都不应有任何元素”,因此页脚必须低于 600px 边距。

页脚文本没有居中的原因clear: both是因为它仅在 div 的开头和该图像的左侧(加上其巨大的边距)之间的宽度内居中。

您应该做的是更改标记,以便您的图像出现在内容 div 内的另一个列 div 中,因为您似乎希望将其显示在自己的列中而不是浮动的。如果你这样做,你将不需要巨大的边距,也不需要clear: both在你的页脚元素上。

这是一个演示:http: //jsbin.com/uxiqer/1/edit

请注意,您可以使用浮点数或position: absolute.imagesdiv 定位在右侧;我只是觉得position: absolute更容易使用。

如果您不需要图像显示在它们自己的列中,那么您可以简单地将浮动保留在图像上并将其删除margin-bottom,然后文本将很好地环绕图像及其边缘。这是 的预期目的float。然后在没有溢出内容 div 的巨大边距的情况下,页脚文本可以正确居中而无需clear: both.

于 2012-10-05T18:02:59.617 回答
0

删除 clear: both 并向页脚添加特定高度,而不仅仅是最小高度。我无法让您的文本对齐,但我敢打赌,如果您删除了“位置:静态”就可以了。

由于您在容器本身上硬编码了 1550px 高度,因此页脚占用了其余可用空间,因为它只有“最小高度”要求而不是最大高度。

于 2012-10-05T18:11:22.553 回答