如何使用2列布局将背景颜色扩展为左右宽度

Question

我试图实现两列布局的效果，左列将其背景颜色向左扩展至全宽，右列将其背景颜色向右延伸至全宽。

所以它就像是“全宽带”，但左边的颜色与右边不同......所以在this example screenshot中，我们将有一个全宽度黄色带，然后左边是全宽薄荷带，宽度为绿色带，然后在右侧为全宽栗色带。

这是可能的CSS，如果是这样，如何？

我用Google搜索，发现了一些例子使用

overflow-x:hidden 

但这些似乎只适用于“全宽乐队”用相同的颜色左，右。希望有人能帮助！

谢谢！

Answer 1

这样的事情呢？

<div id="div1"> 
    <div>Left div</div> 
</div> 
<div id="div2"> 
    <div>Right div</div> 
</div> 

而CSS：

#div1 { 
    width: 50%; 
    float: left; 
    background: yellow; 
} 

#div1 div { 
    padding-left:30%; 
} 

#div2 div { 
    padding-right: 30%; 
} 

#div2 { 
    width: 50%; 
    float: right; 
    background: green; 
} 

2 div容器是50％的宽度和浮动左/右。然后一个div里面每个填充左/右。

可能工作，取决于您现有的代码结构！请看这里的例子：http://jsfiddle.net/dCEKA/。