0

我试图弄清楚如何将 div 推到容器内。我从顶部设置了一个边距，500px它用它向下推容器内的所有其他 div。我已经附上了两张我得到的东西以及我希望它看起来如何的照片。我也包含了代码。

这是它应该看起来的样子 这是我完成网站的 Photoshop 渲染 恰当的

这就是现在的样子，我只是在布置彩色盒子。这background image是页面中设置的渐变body。header应该是上图中的白色部分，带有按钮、图片和登录选项卡。core应该是正下方的区域，header小白线向右。应该是浅灰色框，它位于外部渐变的bottomOutsideBox正下方，并且它旁边core应该位于500px页面顶部下方，因为它header被设置为500px从顶部开始。图像顶部的绿色小间隙只是一条绿色的条子，500px上面有绿色，因为当我设置margin-top:500px它时，它会将所有东西都推下来。我想要header留在顶部，然后core在它的正下方和bottomOutsideBox外面core。我bottomOutsideBox在图片中设置为黑色，这样更容易区分。 不好

/*gradient*/

body {
background-image:url('../Images/gradient.gif');
background-color:#000000;
}

header {
    width: 750px;
    height: 500px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

div#bottomoutsidebox {
    background-color: #000000;
    margin-top: 500px;
    width: auto;
}

/* page core */
div#core {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #dadbd6;
    width: 750px;
    height: 250px;
    clear: both;
}

img.mainLogo {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

HTML：

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>testing</title>
  <meta name="description" content="Welcome to my basic template.">
  <link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
    <div id="wrapper">
        <div id="bottomoutsidebox">
        <header>
            <img class="mainLogo" src="Images/logo.jpg"/>
        </header>

        <div id="core">

        </div>

        <footer>
            <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
        </footer>
        </div>
    </div>

</body>
</html>
4

1 回答 1

2

这是我为这种类型的布局建议的标记，使用容器类来居中您的内容并根据部分更改背景，因为您只需要两个不同的背景，那么标题将是您需要的唯一部分。

演示小提琴

HTML

<body>
    <header>
        <div class="container">
            <img class="mainLogo" src="Images/logo.jpg" />
        </div>
    </header>
    <div class="container">
        <div id="core"></div>
    </div>
</body>

CSS

body {
    margin: 0;
    background: #ccc;
}
.container {
    width: 750px;
    margin: 0 auto;
}
header {
    background: lime;
}
header .container {
    height: 500px;
    background: #fff;
}
#core {
    height: 250px;
    background: #ddd;
}
于 2013-08-04T07:40:14.810 回答