Question

我正试图让一系列图像在div中叠加一个并且我需要一些帮助。 div在CSS中设置为宽450px，顶部图片始终为宽度。随后的图像尺寸会有所不同，需要在右侧填充36px填充。

目前我的代码如下：

<div id="photos">
    <img style="position:relative; top:0px; width:450px" src="images/picture1.jpg" />
    <img style="position:relative; top:0px; float:left; left:100px" src="images/picture2.jpg" />
    <img style="position:relative; top:0px; float:right; right:36px" src="images/picture3.jpg" />
</div>

不幸的是，底部的两张照片想要彼此相邻。即使我在第二张照片之后休息一下，它们仍然在同一个地方。

我尝试将div设置为display: block，但没有变化。

Answer 1

如果您希望它们堆叠，请使用内联块 http://jsfiddle.net/jax29/

CSS

#photos{
width:450px;
}

#photos img{
display:inline-block;
}

#photos img:nth-child(n+2){
margin-right:36px;
float:right;
}

HTML

<div id="photos">
    <img src="http://i.imgur.com/siHvwSU.png" />
    <img src="http://i.imgur.com/siHvwSU.png" />
    <img src="http://i.imgur.com/siHvwSU.png" />
</div>

Answer 2

我可能误解了你想要的东西，但如果你想让图像垂直堆叠而不是水平堆叠，你可以在父div上设置text-align: right;而不是使用float: right来对齐图像。

如果您想使用float: right;，请尝试在每张图片上添加clear: both;。这样，他们就不会想要跳到上一张图片旁边。 using float告诉后续元素显示在浮动元素旁边。

Answer 3

这应符合您的要求。

<div id="photos">
    <img src="images/picture1.jpg" /><br />
    <img src="images/picture2.jpg" style="padding-right:36px;"><br />
    <img src="images/picture3.jpg" style="padding-right:36px;">
</div>

#photos {
    width: 450px;
    text-align: right;
}

需要帮助让图像堆叠在div中

3 个答案: