Question

我如何拥有2种不同的背景颜色，如下所示：

http://i.imgur.com/Vz351e5.png

我正在使用的网格是970px宽。我想要一个220像素宽的侧边栏（左侧，红色后面）和750px的主要内容（右侧，蓝色后面）。

我该怎么做？

Answer 1

您可以使用linear-gradients

div {
  width: 500px;
  height: 500px;
  background: -webkit-linear-gradient(left, red 30%, orange 30%);
  background: -moz-linear-gradient(left, red 30%, orange 30%);
  background: -o-linear-gradient(left, red 30%, orange 30%);
  background: linear-gradient(left, red 30%, orange 30%);
}

<div>

Answer 2

使用2个div怎么样？ http://jsfiddle.net/dowpguwv/1/

HTML：

<div id="left"></div>
<div id="main"></div>

的CSS：

#left {
float: left;
width: 220px;
background-color: red;
height: 100vh;  
}
#main {
width: 750px;
background-color: blue;
height: 100vh;

}

Answer 3

这是一个例子。

.main-box{
width:970px;
background:#1073B9;
height:500px;
}

.side-bar{
width:220px;
background:#FC0018;
height:500px;
}

<div class="main-box">
    <div class="side-bar"></div>
     
</div>

see here

Answer 4

你要做的是一个网格系统（这就是Bootstrap框架无论如何都称之为http://getbootstrap.com/css/#grid）。

假设您希望侧边栏和主要内容位于不同的div中，您可以执行以下操作：

.left {
  float: left;
  background-color: red;
  width: 220px;
}
.right {
  float: right;
  background-color: blue;
  width: 750px;
}

Answer 5

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
section{
    width: 970px;
    margin: 0 auto;
    display: table;   
    height: 250px;
}
.aside,
.article{
    display: table-cell;
    vertical-align: top;
    padding: 20px;    
}
.aside{
    width: 220px;
    background: #f00;
}
.article{
    width: 750px;
    background: #00f;
}

<section>
    <div class="aside"></div>
    <div class="article"></div>
</section>

2种不同的背景颜色？

5 个答案: