html - 将div插入容器内

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

这是它的外观，这是我完成的网站的Photoshop渲染

这就是现在的样子，我正在努力布置彩色盒子。 background image是在页面的body中设置的渐变。 header应该是上图中带有按钮，图片和登录选项卡的白色部分。 core应该是header的正下方，白色小线朝右。 bottomOutsideBox应该是浅灰色的框，该框位于外部渐变的正下方，并且在core旁边，它应位于页面顶部下方的500px，因为header从顶端。图像顶部的绿色小缝隙只是一条银条，在其上方有绿色的500px，因为当我设置500px时，它会将所有内容推向下方。我希望margin-top:500px留在顶部，然后在其下方直接放置header，在core外部放置bottomOutsideBox。我在图片中将core设置为黑色，因此更易于区分。

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

最佳答案

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

Demo fiddle

的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;
}