CSS：将一个图像放置在另一个图像的上方，并将其放置在单独的行中

我有三张编号为1、2和3的图片

我想用CSS显示它们

我现在把它们放在一个

中，并尝试了位置和浮动的各种组合。我可以让它们连续显示，但我无法让图像2位于图像3上方。这是我的密码：

<img src="1.gif" style="padding-right: 4px;"/>
<span>
     <img src="2.gif" style="float: top;">
     <img src="3.gif" style="float: bottom;">
</span>

---

没有浮顶或浮底之类的东西。 要获得与您的示例类似的视觉效果，请尝试以下操作：

<div style="float;left">
  <img src="1.gif" style="padding-right: 4px;"/>
</div>

<div style="float:right">
  <img src="2.gif" style="display:block;">
   <img src="3.gif" style="display:block;">
</div>

---

您希望将图像设置为

显示：block

（这样它们将彼此重叠），并将第一个图像向左浮动

CSS:

HTML:

---

请参见此处的操作：

将css更改为：

img {
    float:left;
    margin-right: 4px;
}
span img {
    float: left;
    margin: 0;
}
span img:last-child {
    margin-top: 50px;
    margin-left: -50px;
}

---

Fiddle:

在css中没有类似于

float:top的属性，类似于float:top所做的是
position:absolute；排名：0。记住使span
位置：相对
以防止图像被放置在身体的最顶端。谢谢。这在一定程度上起了作用：image2现在位于image3之上，但它们都离image1很远。您编写的代码被包装在一个div中，image1在最左边，image2&3在最右边。
<img src="http://placekitten.com/100/100" class="leftside"/>
<div class="stack">
     <img src="http://placekitten.com/50/50">
     <img src="http://placekitten.com/g/50/50">
</div>

img {
    float:left;
    margin-right: 4px;
}
span img {
    float: left;
    margin: 0;
}
span img:last-child {
    margin-top: 50px;
    margin-left: -50px;
}