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

时间:2014-04-29 18:05:08

标签: html css

我正在使用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;
}
}

这就是我希望它的样子:

enter image description here

1 个答案:

答案 0 :(得分: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小提琴 http://jsfiddle.net/grrenier/3TE4X/1/

试试另一个JS小提琴:

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