CSS - 图片和页脚问题答案

【问题标题】：CSS - Images and Footer ProblemsCSS - 图片和页脚问题
【发布时间】：2013-03-17 00:23:41
【问题描述】：

好的，如果你去这里：http://opportunityfinance.net/Test/2013conf/index.html

您会注意到 2 个布局问题

这 3 个徽标的图片需要位于“Gold”<h4> 标签下方。但由于某种原因，它不会这样做。我已经为<div> 标签分配了relative 的位置，因为其中还有其他div 需要将图像与底部对齐，并且这样做正确，但是，它现在不会低于<h4>Gold</h4> HTML。

下一个布局问题：

我一直在努力在页面底部添加页脚。听起来很简单吧？错误的！但是现在我让 div 位于底部，它似乎正在切断它上方的顶部区域 div。因此，并非所有内容都在显示。相反，它被推到页脚下方。我怎样才能解决这个问题？试图在上面加一个填充，但现在确定在哪里和/或如何？页脚上的 margin-top 似乎也没有做任何事情。

非常感谢您对此的任何帮助。为了让这个简单的布局井井有条，我一直在苦苦挣扎。它应该是一个流畅的布局，因为我也在调整页面大小时缩小文本的大小，这似乎很好，除了这两个问题:(

编辑

这是在容器 div 应用 100 像素高度值时的样子：

<h4>Gold</h4> 和 3 张图片之间的空间太大。至少在 Opera 中是这样的。任何可能的解决方法？

【问题讨论】：

标签： css image footer

【解决方案1】：

这里有一个解决办法

.body {
    background-color: #FFFFFF;
    padding: 2em 2em 52px 0;
}

你在一个 div 中有 3 个标志，在那个 div 上添加一个高度，例如

element.style {
    height: 100px;
    position: relative;
    width: 100%;
}

真的很基本的东西，你应该看看clearfix's这里http://css-tricks.com/snippets/css/clear-fix/

当您将 float 或 position:absolute; 添加到 div 时，它会在某种程度上放弃其 reserved 空间，从而导致父 div 认为里面没有任何东西，因此没有 @987654330 @、clearfix 将为您解决这些问题，我之所以说是因为这 3 个徽标都是 floated 或 absolute;

这是我得到的result

【讨论】：

Clearfix 是浮动元素容器的解决方案，但对于绝对（和固定）定位的元素没有任何作用，因为它们完全脱离了流程。您必须知道它们在哪里，它们可以占用多少空间（即使根据 WCAG 2.0 有 200% 的缩放文本）并为此留出空间。可以是沿元素的边距或填充，阻止其他元素在此处显示，等等
是的，我建议 clearfix 的唯一原因是因为他同时具有浮动和绝对，因此浮动将获得大部分高度，但是感谢您提供的信息
我刚才尝试将高度设置为 100 像素……但它太低了。怎么会？
我刚刚打开了你的链接，在我的屏幕上看起来不错，如果可以的话，给我发一张照片:)
在 Opera 浏览器中查看它... 将更新我的问题，用一张新照片显示它现在的样子。