0

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

您会注意到 2 个布局问题

问题 1 - 图片必须低于 GOLD

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

下一个布局问题：

页脚正在切断正文内容

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

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

编辑

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

高度为 100 像素的 div

<h4>Gold</h4>它在 the和 3 图像之间提供了太多空间。至少在 Opera 中是这样的。任何可能的解决方法？

4

1 回答 1

0

这是一个修复

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

当您将floator添加position:absolute;到 div 时，它会以某种方式放弃其reserved空间，从而导致父母div认为里面没有任何东西，因此没有height，clearfix将为您解决这些问题，我说的原因是因为 3 个徽标是要么floated要么absolute;

这是result我得到的

在此处输入图像描述

于 2013-03-27T00:53:28.347 回答