打破容器外的元素 [英] Break element out of container

问题描述

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

但我有一个< div> ，我想突破该容器以跨越页面的整个宽度。

？

  .wrapper {width：300px; margin：0 auto; background：yellow;}。break {text-align：center; font-weight：bold; background：rgba（255,0,0，0.5）; margin-left：-100％; margin-right：-100％;}  

 < div class =wrapper> < h1> Ipsum Dapibus Pellentesque Pharetra< / h1> < p> Duis mollis，est non commodo luctus，nisi erat porttitor ligula，eget lacinia odio sem nec elit。 Etiam porta sem malesuada magna mollis euismod。 Aenean eu leo quam。 Pellentesque ornare sem lacinia quam venenatis vestibulum。 Morbi leo risus，porta ac consectetur ac，vestibulum at eros。 Sed posuere consectetur est at lobortis。< / p> < div class =break>这应该是全宽< / div> < p> Fusce dapibus，tellus ac cursus commodo，tortor mauris condimentum nibh，ut fermentum massa justo sit amet risus。 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。 Maecenas sed diam eget risus varius blandit sit amet non magna。 Aenean eu leo quam。 Pellentesque ornare sem lacinia quam venenatis vestibulum。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。< / p> < div class =break>这应该是全宽< / div> < p> Nullam id dolor id nibh ultricies vehicula id id elit。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Maecenas faucibus mollis interdum。 Donec id elit non mi porta gravida at eget metus。 Donec ullamcorper nulla non metus auctor fringilla。< / p> < p> Vestibulum id ligula porta felis euismod semper。 um。。。。。。。。。。。。。 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Curabitur blandit tempus porttitor。< / p>< / div>  

I have all my content wrapped in a container element with a fixed width.

But I have a <div> that I want to "break out" of that container to span the full width of the page.

http://dabblet.com/gist/3207168

As you can see in that example, I've got the <div> to break out, but since it's positioned absolutely, it doesn't affect the flow of the page...which is what I'd like it to do.

I want it to act like it's in the flow of the page, but expand the full width of the window.

解决方案

Maybe http://jsfiddle.net/sYv9g/1/?

.wrapper {
    width:300px;
    margin:0 auto;
    background:yellow;
}
.break {
    text-align:center;
    font-weight:bold;
    background:rgba(255,0,0, 0.5);
    margin-left:-100%;
    margin-right:-100%;
}

<div class="wrapper">
    <h1>Ipsum Dapibus Pellentesque Pharetra</h1>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
    <div class="break">This should be full width</div>
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <div class="break">This should be full width</div>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</p>
</div>

这篇关于打破容器外的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！