html - 使用 css 创建 100% 宽度中间列的最佳方法

Question

我有一个非常标准的 css 布局，我使用一个 980 像素宽的容器 div 来容纳所有内容。唯一的问题是我想在页面中间有一个 1900 像素宽的横幅，它位于中间，并且是页面的 100% 宽度。有没有办法在不删除容器 div 的情况下做到这一点？

所以我想要

 ____________________
 |   |           |   | 
 |   |           |   | 
 |   |           |   | 
 |___|           |___|
 |                   |
 |                   |
 |___             ___|
 |   |           |   |
 |   |           |   |
 |   |           |   |
 |   |           |   |
 |___|___________|___|

     < 980px    > container
 < 100% page width  >

有谁知道如何在不删除我的容器 div 的情况下使 1900 像素的横幅居中显示？

谢谢!!

Answer 1

为了演示我没有做 1900px，但我相信你会明白的:)

Demo

悬崖笔记:

HTML:如果您希望整个横幅可见(制作滚动条)，请删除 containerWrapper

<div id="containerWrapper">
    <div id="container">

        <p>content</p>

       <div id="banner">        
              someday i'll grow  up to be 1900 px wide!      
       </div>

        <p>content</p>

    </div>​
</div>

CSS:

#containerWrapper {
    width:100%;
    overflow:hidden;
}

#container {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}

#banner {
    margin-left:-200px; /* (this width - #container) / 2 */
    width:700px;
}