我正在重新设计一个网站,不同的部分(标题,横幅图像,主要部分等)的背景一直延伸,但内容包含在一定宽度,并且该框居中。< / p>
但是,在设计中,“横幅图像”(标题下方的图像,但主要内容之上)将超出内容其余部分的宽度。起初这很容易,直到需要在横幅图像上方放置文本,并且该文本需要与文本的其余部分对齐。
我无法使用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%;
}
答案 0 :(得分: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;
}