html - 非全 Angular 内的全 Angular div

Question

我会创建这样的东西 jsFiddle .
我有一个容器，宽度为 1024px。然后我会在页面中间创建一个全 Angular div，例如一张图片。
在这个例子中，黄色的 div 应该覆盖蓝色的(模拟我的屏幕宽度)。
PS:我简化了容器，但在 wordpress 包装器内部思考，其中 .red 是帖子，.yellow 是全 Angular 图像。 (例如 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

您应该在打开.yellow 之前关闭.red，否则.red 将成为.yellow 的父级> 并且如果您将 width:100%; 放在 .yellow 上，它将采用 width:200px; 来自 .red 而不是 .container。

这是一个JSFiddle .