Question

您会注意到2个布局问题

Problem 1 - Images need to be below GOLD

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

下一个布局问题：

Footer is cutting off the body content

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

非常感谢任何帮助。我一直在努力让这个简单的布局井井有条。它应该是一个流畅的布局，因为我正在调整文本大小，因为页面调整大小，这似乎是完全正常的，除了这两个问题：（

修改

下面是应用容器div 100像素高度值时的图片：

div with 100 pixel height

它在<h4>Gold</h4>和3张图像之间留出了太多空间。至少这是Opera的情况。对此有任何可行的解决方法吗？

Answer 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/

进行研究

当您向div添加float或position:absolute;时，它会以某种方式放弃其reserved空格，从而导致父div认为没有内部的任何内容都没有height，clearfix会为您解决这些问题，因为我说是因为3徽标都是floated或absolute;

这是result我得到

enter image description here