Question

我在这里遇到一些问题......我有一个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;
}

任何帮助或正确方向上的一点都会很棒！谢谢！

Answer 1

由于看起来你正在使用静态宽度，你应该能够只使你的IMG元素阻塞和定位：绝对并将它们对齐上/下。

.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和CSS

1 个答案: