0

我正在尝试让一系列图像在一个 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，但没有任何变化。

4

3 回答 3

2

如果您希望它们堆叠，请使用 inline-block 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>
于 2013-07-24T17:35:35.660 回答
0

这应该符合您的要求。

<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;
}
于 2013-07-24T17:43:32.400 回答
0

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

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

于 2013-07-24T17:41:03.450 回答