0

JSFiddle：http: //jsfiddle.net/eFNAF/17/

注意绿色背景和覆盖它的图像。上一个/下一个“按钮”位于照片上方。这会导致按钮最初放置的照片上方有空白区域。我想如图所示将按钮浮动在照片上，但不“使用”照片上方的空间。例如，我希望按钮绝对定位，但仍相对于它们的容器。另请注意，div.Image使用自动左/右边距居中。这使得它position: absolute无法使用。

编辑：图像应与绿色框顶部对齐。按钮应偏移图像顶部下方 10 像素，距离图像左侧/右侧 10 像素。将显示不同大小的图像，因此无法在 CSS 中设置图像大小。

4

1 回答 1

2

CSS

.Image,
.Image img
{
    width:366px;
    height:341px;
    border:0;
}
.Image
{
    position:relative;
}
.Image a
{
    position:absolute;
    top:10px;
    width:28px;
    height:28px;
    background-color:red;
    border:1px solid black;
    text-align:center;
    z-index:2;
    text-decoration:none;
    display:block;
}
.Image a.Previous
{
    left:10px;
}
.Image a.Next
{
    right:10px;
}​

HTML

<div class="Image">
    <a href="" class="Previous">&lt;</a>
    <a href="" class="Next">&gt;</a>
    <img src="http://images5.fanpop.com/image/photos/31500000/Happy-Hyena-hyenas-31563531-385-358.jpg">
</div>

​<a href="http://jsfiddle.net/eFNAF/19/" rel="nofollow">演示

更新：

改变这个：

.Image,
.Image img
{
    width:366px;
    height:341px;
    border:0;
}
.Image
{
    position:relative;
}

到：

img
{
    border:0;
    vertical-align:bottom;
}
.Image
{
    position:relative;
    display:inline-block;
}

演示 2

于 2012-08-13T20:34:18.017 回答