我正在尝试放置一条与我的内容一样宽的丝带，但将两侧“溢出”到 body 上。示例 here .这是我到目前为止的 HTML。共有三个图像:丝带的中间部分，然后是两侧。我将中间部分放在 h1 中，现在我正在尝试将两侧对齐。
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
我对 CSS 的看法。我一直在试验，这满足了我的需要，但我相信有一百万个更好的解决方案。我想知道对此的最佳做法是什么，因为我确信我在这里违反了很多规则。
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
最佳答案
肯定有上百万种方法可以实现这一目标。最佳方法在很大程度上取决于您网站的进展情况。
归根结底就是相对定位和绝对定位。
实现此目的的一种方法是像这样构建您的网站:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
对于典型站点来说，这是非常松散的框架。 CSS 应该是这样的:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
这是例子 http://jsfiddle.net/NZ8EN/
这一切都非常松散，但希望能让您了解前进的方向。
肯定还有其他方法可以解决这个问题。
关于html - 色带定位在容器外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19548860/