小编gre*_*oss的帖子

我正在重新设计一个网站,不同的部分(标题,横幅图像,主要等)的背景一直延伸,但内容包含在一定的宽度,并且该框是居中的.

但是,在设计中,"标题图像"(标题下方的图像,但主要内容之上)将超出内容其余部分的宽度.起初这很容易,直到需要在横幅图像顶部放置文本,并且该文本需要与文本的其余部分对齐.

我不能使用CSS背景图像,因为在某些页面上,横幅图像区域将是一个滑块,需要标签.

我有一个有效的解决方案,但它似乎很笨重,我希望找到一个更好的方法:http://jsfiddle.net/PkStg/10/

HTML:

<div class="header">
    <div class="content-wrapper">
        header text
    </div>
</div>
<div class="banner">
    <div class="content-wrapper">
        <div class="banner-text-outer">
            <div class="banner-text-inner">
                <h2>banner text header</h2>
                <p>banner text paragraph</p>
            </div>
        </div>
    </div>
    <div class="banner-image-wrapper">
        <img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
    </div>
</div>
<div class="main-content">
    <div class="content-wrapper">
        main content text
    </div>
</div>

CSS:

.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
    margin: 0 auto;
    max-width: 300px;
}

.banner-text-outer …