-1

这是一个相当基本的 HTML/CSS 问题，很抱歉我不得不在这里问这个问题（我已经尽力了！）。我编写了以下 HTML 和 CSS 代码，虽然标题部分与文章和旁边的部分相隔 20 像素，但页脚仅相隔 10 像素。事实上，不管我为页脚设置的边距如何，间隔仍然是 10 像素。我究竟做错了什么？

如果您可以在浏览器中测试此代码以了解我的意思，那就太棒了。我还在文章/旁边部分和页脚部分之间的倾斜边距下方插入了一个图片链接。

http://cl.ly/image/3M2u1L0x2C0x

HTML 代码

<!DOCTYPE html>
<html>
    <head>
    <title>My Grey Boxes</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
<div id="wrapper">
    <header></header>
    <article></article>
    <aside></aside>
    <footer></footer>
</div>
</body>
</html>

CSS 代码

#wrapper {
    margin: auto;
    width: 940px;
    }

body {
    background-color: #fafafa;
    }

header {
    height: 120px;
    width: 920px;
    display: block;
    margin: 10px 10px;
    position: relative;
    background-color: #c6c6c6;
    }

article {
    height: 740px;
    width: 600px;
    margin: 10px 10px;
    float: left;
    position: relative;
    background-color: #c6c6c6;
    }

/* Keep scrolling! */

aside {
    height: 740px;
    width: 300px;
    margin: 10px 10px;
    float: right;
    position: relative;
    background-color: #c6c6c6;
    }

footer {
    height: 120px;
    width: 920px;
    display: block;
    margin: 10px 10px; /* Why is this being ignored? */
    background-color: #c6c6c6;
    position: relative;
    clear: both;
    }

任何帮助将不胜感激！如果我没有遵守这里的所有社区准则，我很抱歉 - 这是我第一次在 StackOverflow 上发帖，我会尽快处理！提前谢谢！:)

4

1 回答 1

0

在到达页脚之前，您需要清除浮动。将您的 HTML 更改为此将起作用：

<div id="wrapper">
    <header></header>
    <article></article>
    <aside></aside>
    <div style="clear:both;"></div>
    <footer></footer>
</div>
于 2013-04-21T15:46:03.373 回答