Question

我会创建类似jsFiddle的内容。
我有一个容器，宽度为1024px。然后我会在页面中间创建一个fullwidth-div，例如一个图像。
在示例中，黄色div应覆盖蓝色div（模拟我的屏幕宽度） PS：我简化了容器，但在wordpress包装器中思考.red是帖子，.yellow是全宽图像。（例如HERE。我知道使用网页制作而不是帖子） HTML

<div class="container">
<div class="red">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
    <div class="yellow">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
    </div>
    <div class="lime">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
    </div>
</div>
</div>

CSS：

 .container{ background: blue; width: 400px;}
    .red {background:red; width: 200px; margin: 0 auto;}
    .yellow {background:yellow; width: 300px;}
    .lime {background:lime; width: 200px; margin: 0 auto;}

Answer 1

您应该在开启.red之前关闭.yellow，否则.red将成为.yellow的父级，如果您将width:100%;放在.yellow上它将取width:200px; .red而不是.container。

这是JSFiddle。

Answer 2

尝试考虑不同的更改css参数，而不是使用background-color。我用:box-shadow参数测试了它：

.toggle {
      box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}

请看一下实时示例：全宽蓝色部分：http://kreditka.testovi-site.pw

此致最大

非宽度内的全宽度div

2 个答案: