CSS:将一个图像放在单独的行中的另一个图像之上

Question

我有三张图片，编号分别为 1、2 和 3。

我想用 CSS 显示它们 like demonstrated here.

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

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

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