html - 包含两列的全宽 DIV 的单独背景颜色

Question

我正在使用 Twitter Bootstrap ，我很难弄清楚如何将主容器 div 内的两列的背景颜色分开，但让它全宽。

这是我目前拥有的一小部分:http://jsfiddle.net/seeplanet/ZTbwz/

我的主要问题是我想让两列在页面上居中，而不是延伸到两边。这就是为什么我在容器上设置了最大宽度。

我的 HTML:

<div id="featured-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">                          
            Featured Video or Image Gallery     
            </div>

            <div class="col-sm-3">  
             Other Information              
        </div>
        </div>
    </div>
</div>

我的 CSS:

#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}

.container {
max-width: 960px;
margin:0 auto;
}

.col-sm-9{
 width:75%;   
 float:left;
 background:yellow;
}

.col-sm-3{
 width:25%;
 float:left;
}
}

这就是我希望的样子:

Answer 1

像这样将 display:table; 添加到您的容器中:

.container {
    max-width: 360px;   /* If I remove this, then it works, but then my content is not centered */
    margin:0 auto;
    display:table;
}

JS fiddle http://jsfiddle.net/grrenier/3TE4X/1/

试试这个其他的 JS Fiddle:

http://jsfiddle.net/grrenier/3TE4X/2/