我在这里遇到了一些问题...我有一个 Div,它叫做 leftSideBar,里面有两个图像,一个顶部和一个底部,这个 div 有一个 repeat-y 背景。它确实有一个最小高度,但我使用 jquery 来获取我的内容 div 的高度,就像这样......
$(document).ready(function() {
var div_height = $("#content").height();
$(".leftSideBar").css("height", div_height);
var div_height = $("#content").height();
$(".rightSideBar").css("height", div_height);
});
我想要做的是将顶部图像放在 div 的顶部,将底部图像放在 div 的底部...这是 HTML...
<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--leftSideBar-->
<div class="content" id="content"></div><!--content-->
<div class="rightSideBar">
<img src="images/rightSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--rightSideBar-->
和 CSS
.leftSideBar{
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
width:174px;
}
.rightSideBar{
background:url(../images/rightSide.jpg) repeat-y;
float:right;
margin-top: -49px;
width:174px;
}
.content{
background:#FFF;
width: 992px;
position:relative;
min-height: 591px;
float:left;
margin: -48px auto 0;
font-size:13px;
}
任何帮助或指向正确方向的观点都会很棒!谢谢!
最佳答案
因为看起来您使用的是静态宽度,所以您应该能够让您的 IMG 元素成为 block 状和 position: absolute 并将它们对齐到顶部/底部。
.img-side{
display:block;
position:absolute;
left:0;
top:0; /* we'll use top as a default*/
}
.img-side.bottom{
top:auto; /* might need this, I'm not sure. */
bottom:0;
}
对于您的 HTML,只需添加类:
<img class="img-side" ... />
<img class="img-side bottom" ... />
如果您计划在侧边栏中添加内容,您需要在侧边栏的顶部/底部添加适当的填充,这样您的内容就不会覆盖您的图像(除非设计如此)。
更新
请注意,您必须将侧边栏设置为相对位置,以便您的 IMG 元素使用它进行定位。您可以将 CSS 更新为更像这样:
.sideBar{ /* left will be default */
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
width:174px;
position:relative;
}
.sideBar.right{
background:url(../images/rightSide.jpg) repeat-y;
float:right;
}
关于html - 顶部图像,重复背景和底部图像...HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9621297/