Question

不是我第一次希望所有部分中的所有内容都在最大宽度的容器中，但唯一的解决方案是重复的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＆＃34;包装＆＃34;内部看起来是控制每个具有最大宽度/居中的部分的唯一解决方案，并且能够在几个部分中放置全宽背景。

我不喜欢这个解决方案，对于每个具有相同属性的部分都是一个div重复。如果有一天我改变主意并想要删除它，或者我需要在每个部分中执行它，或者我需要将css移除到该选择器。它看起来对我来说不是一个语义。

任何解决方案？

Answer 1

我会像这样创建一个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>

CSS布局 - 拥有包装器的最佳方式

1 个答案: