0

我有以下简单的 html 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
    position: relative;
    width: 1000px;
    min-height: 300px;
    margin: 0 auto;
    border: 1px solid red;
    background-color: green;
}
#allcontent {
    position: static;
    top: 225px;
    margin: 225px auto 0px auto;
    width: 850px;
    background-color: blue;
}
#content {
    border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
    <div id="allcontent">
        <div id="content">
            <p>This is content</p>
        </div>
    </div>
</div>
</body>
</html>

它看起来和我想要的完全一样，但是如果我从#page 中删除边框，它会完全搞砸布局。我不知道为什么。我知道，我可以使用透明边框作为解决方法，但这似乎很奇怪......

4

2 回答 2

2

因为您margin:225px auto 0px auto的<div id="allcontent">内容将整个内容向下推。

而不是使用margin，使用position:absolute/relative将您的元素定位在您的<div id="page">.

于 2013-03-03T16:55:21.023 回答
1

的边际#allcontent正在将其推低。 http://jsfiddle.net/2QjYG/

于 2013-03-03T16:58:38.370 回答