布局的两种背景颜色与水平地集中的内容

Question

参考上图，我想创建以下网页布局：

• 第1列和第4列是流动边距
• 第2列+第3列=用于显示内容的固定宽度容器
• 第1列和第2列具有相同的背景颜色
• 第3列和第4列具有相同的背景颜色

到目前为止，我已尝试对第1列和第4列使用一些position:fixed黑客攻击，但我希望有更好的方法来实现这一目标。 My fiddle

Answer 1

我发现最好的方法是简单地使用背景渐变。

HTML：

<div id="container">
     <div id="left"></div>
     <div id="right"></div>
</div>

CSS：

body {
    background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
}

如果有兴趣的话，请更新小提琴：fiddle

Answer 2

尝试使用css为列div设置适当的ID。

#col1{
  /* left column */
  width: 25%; /* adjust as much as you want */
  display: block;
}

#col2{
  /* container for both middle columns */
  width: 50%;
  position: relative;
  float: left;
  margin: 0 auto;
  display: block;
}

#col3{
  /* right column */
  width: auto;
  float: right;
  display: block;
}

#col4{
  /* center left column */
  width: 250px; /* set appropriate width */
  float: left;
  position: relative;
}

#col5{
  /* center right column */
  width: 350px; /* set appropriate width */
  float: left;
  position: relative;
}

您的HTML将如下所示：

<div id='col1'></div>
<div id='col2'>
  <div id='col4'></div>
  <div id='col5'></div>
</div>
<div id='col3'></div>