html - 将元素从容器中分离出来

Question

我将所有内容包装在一个固定宽度的容器元素中。

但是我有一个<div>我想“突破”那个容器以跨越页面的整个宽度。

http://dabblet.com/gist/3207168

正如您在该示例中看到的，我有 <div>打破，但由于它是绝对定位的，它不会影响页面的流动......这是我希望它做的。

我希望它表现得像在页面流中一样，但扩展了整个窗口的宽度。

Answer 1

另一个想法，在现代浏览器中确实将 .breakout 拉伸(stretch)到浏览器窗口的宽度:

body, html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

div {
  padding:0.5em;
}

.container {
  width:300px;
  background-color:rgba(255,255,0,0.5);
  margin:auto;
}

.breakout {
  margin:1em -100%; /* old browsers fallback */
  margin:1em calc(50% - 50vw);
  background-color:rgba(255,0,255,0.5)
}

<div class="container">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  <div class="breakout">
    Break out of container
  </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

编辑:唯一的 Chris Coyier 解释 Full Width Containers in Limited Width Parents , 这有点相似。