CSS 使颜色偏向两侧

Question

有点模糊的标题，但我不确定如何最好地描述它。

我在包装器中创建了两个 div 的 fiddle (https://jsfiddle.net/h87k8146/)。

所以我想要实现的是让所有内容都保留在包装器中，但 .left 和 .right 的背景会伸展以填充屏幕的其余部分。

当前CSS

.wrap {
width:80%;
position:relative;
margin:0px auto;
}
.left {
float:left;
width:70%;
height:300px;
background:#F4E6D7;
}
.right {
float:right;
width:30%;
height:300px;
background:#A2195B;
}

当前HTML

<div class="wrap">
<div class="left"></div>
<div class="right"></div>

<div style="clear:both;"></div>
</div>

我该怎么做？

所以我想要实现的是这个（粗略的例子）：

http://s2.postimg.org/bqxko5kpl/example.jpg

Answer 1

（更新）像这样？（也许不是你想要的..如果不是请说得更清楚，谢谢。

CSS

body{
    background: #f4e6d7;
    background: -moz-linear-gradient(left,  #f4e6d7 0%, #f4e6d7 65%, #a2195b 65%, #a2195b 100%) ;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f4e6d7), color-stop(65%,#f4e6d7), color-stop(65%,#a2195b), color-stop(100%,#a2195b)) ;
    background: -webkit-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: -o-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: -ms-linear-gradient(left,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%) ;
    background: linear-gradient(to right,  #f4e6d7 0%,#f4e6d7 65%,#a2195b 65%,#a2195b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4e6d7', endColorstr='#a2195b',GradientType=1 );
    background-repeat:no-repeat;
    background-size:100% 150px;

}

.wrap {
    width:80%;
    position:relative;
    margin:0px auto;
    overflow: hidden;
}
.left {
    float:left;
    width:70%;
    height:300px;

}
.right {
    float:right;
    width:30%;
    height:300px;

}

DEMO HERE

Answer 2

试试这个

.wrap {
  width: 100%;
  position: relative;
  margin: 0px auto;
}
.left {
float: right;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
border: 1px solid #aaa;
}
.right {
float: left;
  width: 70%;
  height: 300px;
  background: #A2195B;
border: 1px solid #aaa;
}

.rightWrapper{
position:absolute;
width: 70%;
background: #F4E6D7;
height: 300px;
}

.leftWrapper{
   position:absolute;
width:30%;
height:300px;
right: 0px;
background: #A2195B; 
}

<div class="wrap">
<div class="rightWrapper">
    <div class="left">Left content here</div>
</div>
<div class="leftWrapper">
    <div class="right">Right content here</div>
</div>
</div>

在这里工作 JSFiddle https://jsfiddle.net/h87k8146/6/

Answer 3

您无需额外 HTML 即可完成此操作，方法是使用一对伪元素，每侧一个。

.left:before {
    content:'';
    position: absolute;
    height: 100%;
    top:0;
    right: 100%;
    width: 10vw;
    background: green;
    z-index: -1
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top:0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

.wrap {
  width: 80%;
  position: relative;
  margin: 0px auto;
}
.left {
  float: left;
  width: 70%;
  height: 300px;
  background: #F4E6D7;
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 10vw;
  background: green;
  z-index: -1
}
.right {
  float: right;
  width: 30%;
  height: 300px;
  background: #A2195B;
  position: relative;
}
.right:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: 100%;
  width: 10vw;
  background: red;
  z-index: -1;
}

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div style="clear:both;"></div>
</div>

作为一项附加功能，您可以使伪元素的背景颜色继承它们的 "parent's" 背景，这样就不需要每次都重新设置。

JSfiddle Demo

CSS 使颜色偏向两侧

CSS make colours go off to sides

html

css

position