javascript - 将图像相互堆叠问题

Question

我试图将所有较大的图像堆叠在一起，并在其下方放置缩略图。

我是这样做的:

#images img {
    position: absolute;
    top: 0px;
    left: 0px;
}

但问题是缩略图移到了页面顶部。如何让缩略图位于大图下方并堆叠大图。

PS:我宁愿不用margin-top

HTML:

<div id="gallery">
    <div id="images">
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/>
    </div>

    <div id="thumbnails">
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/></a>
    </div>
</div>

CSS:

#gallery {
    margin: 0 auto;
    width: 800px;
}
#thumbnails {
    margin: 10px auto 10px auto;
    text-align: center;
    width: 800px;
}
#images {
    width: 770px;
    float: left;
    position: relative;
    left: 0;
    top: 0;
}
#thumbnails img {
    width: 130px;
    height: 130px;
}
#images img {
    border: 4px solid #555;
    margin-top: 5px;
    width: 750px;
}
#thumbnails a:link, #thumbnails a:visited {
    width: 130px;
    height: 130px;
    border: 6px solid #555;
    margin: 6px;
    float: left;
}
#thumbnails a:hover {
    border: 6px solid #888;
}

JSFiddle Demo

Answer 1

当您使用 float 、固定位置或绝对位置时，元素将从页面布局的静态流中移除，并且不再影响父元素的计算高度。当出现 float 问题时，我们可以使用 clearfix，但对于绝对定位，您需要在容器上设置高度。

要解决这个问题在您的示例中，我们知道图像的大小，所以我在包含您希望的绝对定位后将 height: 630px; 添加到 #images用于堆叠图像。

附言我还在 #thumbnails 的左侧和右侧添加了 -5px 边距，以抵消第一个和最后一个缩略图的外边距，使其与 #images 水平对齐。

#images img {
    position: absolute;
    top: 0px;
    left: 0px;
}

#gallery {
    margin: 0 auto;
    width: 800px;
}
#thumbnails {
    margin: 10px -5px;
    text-align: center;
    width: 800px;
}
#images {
    width: 770px;
    position: relative;
    height: 630px;
}
#thumbnails img {
    width: 130px;
    height: 130px;
}
#images img {
    border: 4px solid #555;
    margin-top: 5px;
    width: 750px;
}
#thumbnails a:link, #thumbnails a:visited {
    width: 130px;
    height: 130px;
    border: 6px solid #555;
    margin: 6px;
    float: left;
}
#thumbnails a:hover {
    border: 6px solid #888;
}

<div id="gallery">
    <div id="images">
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/>
    </div>

    <div id="thumbnails">
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/></a>
    </div>
</div>