5

我正在重新设计一个站点，并且不同的部分（标题、横幅图像、主要等）具有一直延伸的背景，但是内容包含在一定的宽度并且该框居中。

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

我不能使用 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 {
    position: relative;
}
.banner-text-inner {  
    position: absolute;
    top: 10px;
}

.banner-image-wrapper {
    margin: 0 auto;
    max-width: 400px;
    min-width: 300px;
    font-size: 0;
}
.banner-image-wrapper img {
    width: 100%;
}
4

1 回答 1

1

我知道您不想使用背景图像，但这里有一个解决方案，可以将其用于看到该页面的任何其他人。

也许您的滑块可以使用背景图像？

这应该这样做： jsFiddle

HTML

<body>
    <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>
    <div class="main-content">
        <div class="content-wrapper">
            main content text
        </div>
    </div>
</body>

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 {
    background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
    background-size: contain;
    background-position: center;
    min-height: 150px;
}
于 2013-06-27T16:23:24.410 回答