Question

我有三张图片分别为1,2和3。

显示它们

我目前将它们放在<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/

CSS：将一个图像放在另一个图像上面的不同行中

3 个答案: