Question

我试图找出如何在容器内推动div。我从顶部设置了500px的边距，然后用它推下容器内的每个其他div。我收录了两张我正在拍摄的照片以及我希望它的外观。我也包括了代码。

这应该是看起来这是我完成的网站的photoshop渲染 Proper

现在看来我正在制作彩色盒子。 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; }设置为黑色，因此更容易区分。 not good

<!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>

HTML：

{{1}}

Answer 1

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

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

在容器内推动div

1 个答案: