css - CSS：将一个图像放在另一个图像上方的单独行中

Question

我有三个编号为 1、2 和 3 的图像。

我想像这里演示的那样使用 CSS 来显示它们。

我目前将它们放在 a<span>中，并尝试了位置和浮动的各种组合。我可以让它们连续显示，但我不能让图像 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>

Answer 1

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

<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>

Answer 2

您想将图像设置为display: block（因此它们最终会彼此重叠），并将第一个图像浮动到左侧。

CSS：

.stack img {
  display: block;
}

.leftside {
  padding-right: 4px;
  float: left;
}

HTML：

<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>

在此处查看此操作：http: //codepen.io/paulroub/pen/zFEjH

Answer 3

将您的 CSS 更改为：

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

小提琴：http: //jsfiddle.net/FLTU7/