标记 HTML 横幅的最佳方式答案

【问题标题】：Best way to markup an HTML banner标记 HTML 横幅的最佳方式
【发布时间】：2011-04-07 05:30:27
【问题描述】：

我的页面的一般html结构是

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

我有一个 1000 像素的布局，内容居中。

但是，对于几个页面，我在内容中有一个横幅，应该 100% 扩展到浏览器的两侧（即超出 1000 像素的包装）。

我是否应该删除此页面的包装 div 并应用宽度：1000px；边距：0 自动；分别地？或者我应该把横幅放在标准包装布局之外？有什么更标准的方法来做到这一点？

谢谢。

【问题讨论】：

this question 可能会有所帮助。

标签： html css

【解决方案1】：

对内容横幅使用 style="overflow:show" 父级应该允许它显示。您可能需要使用一些 javascript 来获取屏幕宽度并将其设为该宽度，而不是 width=100%。

【讨论】：

不要将 JavaScript 用于可以在 HTML 和 CSS 中做得更好的事情。

【解决方案2】：

我会把横幅放在包装之外。

【讨论】：

我同意。当您希望横幅不成为包装器的一部分时，为什么要添加专有规则。即你把它放在包装之外。

【解决方案3】：

我遇到了同样的问题，做了这样的事情：

.center
{
  margin: auto;
  width: 1000px;
}

<div id="wrapper">
  <div id="header">
  </div>
  <div id="content">
    <div class="center">
    </div>
    <div id="banner">
    </div>
    <div class="center">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

【讨论】：