如何在一个div中垂直堆叠图片

Question

我想要一个包含三个图片的div，并且我希望这些图片垂直堆叠。
我把div的宽度设为图片的宽度，但是没起作用。以下是我的代码：

.detailImgWrapper
    {
    display: inline;
    position: relative;
    width: 25px;
    top:-210px;
    }

.detailImgWrapper img
    {
    visibility: hidden;
    padding: 0;
    padding-top: 10px;
    display: inline;
    width: 25px;
    height: 25px;
    }

感谢您的关注。

谢谢查阅。

- Dale

---

你能否发送一个使用jsfiddle.net的示例链接？我不明白为什么将display:block设置为您的img标签无法实现您想要的效果（正如Aaron所建议的那样）。 - Edouard Tabet

Answer 1

将您的图片设置为display:block，它们应该垂直堆叠。

- Aaron

---

我也是这么想的。当我这样做时，换行符应用于整个窗口，而不仅仅是在div内部。 - Dale

如果我将img更改为display:block，则似乎也会应用于包含的div。 - Dale

@jblasco 谢谢你提供的 jsFiddle。我修改了它以展示我的确切问题。我想要包含三个垂直堆叠图像的 div 在这里创建的另一个 (35x35) div 的右侧。http://jsfiddle.net/QqJRR/1/ 我只能解决其中一个问题，而不能同时解决两个问题。谢谢。 - Dale

这可以通过使用 float: left http://jsfiddle.net/jblasco/QqJRR/2/ 或 display: inline-block http://jsfiddle.net/jblasco/QqJRR/3/ 来实现。 - justisb

好主意，@jblasco，请记住，如果您要使用“inline-block”方法，应将“vertical-align”属性设置为“top”，以实现与浮动块相同的效果。(http://jsfiddle.net/QqJRR/4/) 同样，inline-block在一些旧浏览器上无法正常工作(即IE6)，因此浮动块可能是您最好的选择。只需记得在浮动div下方放置清除元素，以强制它们的父元素承认其高度。 - Aaron

Answer 2

我使用父元素的display:inline 和子元素的display:block组合来水平排列具有尺寸的元素。显示为block是必要的，以给予尺寸（在你的情况下是padding）。

你编写的代码似乎旨在将图像水平排列而不是垂直堆叠。那么，我想知道display:inline在父元素中起到了什么作用？

- Dale Rollinson