Question

我有一个固定宽度的包装器用于我的所有页面，但是如果我的页面内容需要有一个全宽度，例如幻灯片放映。

HTML

<div id="wrapper">
//fixed width contents
</div>

CSS

#wrapper{
width: 960px;
margin: 0 auto;
}

我不想创建另一个全宽的包装器，如：

CSS

#wrapper-full-width{
width: 100%
}

HTML

<div id='wrapper-full-width'>
// some contents with full width like slideshow
</div>

所以我只需要一个可以用于所有页面的包装器。

首页

<div id="wrapper">
<div id="header"></div>

<div id="slideshow> // fixed width=960px</div>

<div id="footer"></div>
</div>

产品页面

<div id="wrapper">
<div id="header"></div>

<div id="slideshow"> // full width=100% </div>

<div id="footer"></div>
</div>

如何为内容需要全宽的页面使用相同的包装器？

Answer 1

嗯，有两个选项：要么将一个fullwidth类添加到包装器本身，要么添加到该特定页面上的<body>标记：

<div id="wrapper" class="fullwidth">
  <div id="header"></div>
  <div id="slideshow"></div>
  <div id="footer"></div>
</div>

#wrapper.fullwidth { width: 100%; }

或者：

<body class="fullwidth">
    <div id="wrapper">
      <div id="header"></div>
      <div id="slideshow"></div>
      <div id="footer"></div>
    </div>
</body>

.fullwidth #wrapper { width: 100%; }

固定和全宽页面的可重复使用的包装器

1 个答案: