html - 外部 div 屏幕取决于分辨率，内部 div 固定宽度居中。

Question

我正在尝试做一个顶部有标题和菜单的网站，该网站是 2 种彩色背景，无论显示器分辨率如何，它都分布在整个屏幕宽度上，但是我想要内容本身的 Logo 、菜单项等。居中并且宽度不超过 1024 像素，当然具有相同颜色的背景，因此它显示为实心的 2 行内容。在那下面是空白，我希望它的内容也以 1024 像素为中心。我不确定如何完成此操作，就好像我的 div 100% 一样，内部 div 不会居中固定。我知道这是基本的，但我还没有掌握 css，并且我试图避免在表格中包含一张图片，以防我解释的方式毫无意义。不希望线条希望它始终显示为纯色。任何帮助将不胜感激。 http://i.stack.imgur.com/yUc70.png

Answer 1

您可以使用多个嵌套的 div。外层提供整个宽度的背景和颜色，内层提供内容、宽度和居中

<div class="header">
    <div class="content">Header</div>
</div>
<div class="menu">
    <div class="content">Menu</div>
</div>
<div class="main">
    <div class="content">Content</div>
</div>

.content {
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
}
.header {
    background-color: olive;
    color: darkred;
}
.header .content {
    border-left: 2px solid darkred;
    border-right: 2px solid darkred;
}
/* same for menu, main */

完整 JSFiddle

更新:

要去除网页周围的空白，必须去除边距

body {
    margin: 0;
}

已修改 JSFiddle