【问题标题】:Best way to create 100% width middle column with css用 CSS 创建 100% 宽度中间列的最佳方法
【发布时间】:2010-05-27 10:50:03
【问题描述】:

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

所以我想要

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

     < 980px    > container
 < 100% page width  >

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

谢谢!!

【问题讨论】:

    标签: html css layout


    【解决方案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;
    }
    

    【讨论】:

    • 谢谢丹!两件事..这适用于所有浏览器吗?其次,如果它的 1900px 宽不会在底部创建一个水平滚动条?我该如何摆脱这个?
    • 我在 IE8、FF、Chrome 和 Safari 上进行了测试。至于滚动条,请参阅我在答案中添加的“containerWrapper”。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-10-03
    • 2014-11-18
    • 2012-09-01
    • 2021-10-28
    • 2018-09-29
    • 2012-06-22
    • 2014-08-03
    相关资源
    最近更新 更多