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 に答える