这不是我第一次希望所有部分中的所有内容都在具有最大宽度的容器中，但唯一的解决方案是重复的html标记。像这样的东西：
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
将div“包装”置于内部看起来是控制每个具有最大宽度/居中的部分的唯一解决方案，并且能够在几个部分中放置全宽背景。
我不喜欢这个解决方案，对于具有相同属性的每个部分都是div重复。如果有一天我改变主意并想要删除它，或者我需要在每个部分中执行它，或者我需要将css移除到该选择器。它看起来对我来说不是语义。
有解决方案吗
我会像这样创建一个div
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
然后，您可以控制所有部分的一个位置的最大宽度。如果您不想要某个部分的最大宽度，请从该部分中删除该网站容器div。你在宽度上改变主意？在一个地方更改它。你决定走100％宽度，在div里面将宽度改为100％。使整个网站的管理变得容易..
你的CSS
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
然后，如果你添加另一个div，
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>