html - 如何在一个跨度块中将一张照片放在另一张照片上？

Question

基本上 pic1 将具有 pic2+pic3 的高度。

并且所有 pic1,2,3 将在同一个块中，pic2 和 pic3 和 pic1 将具有相同的宽度

左边的 pic1 和右边的 pic2,3。

我的代码不起作用...请帮助：

<div class ="row">

<span class ="row_1">
<img src="image/under.png" />
</span>

<span class ="row_2">
<img src="image/under.png" />
<img src="image/under.png" />

</span>
</div>

CSS：

.row_1 img {
display: inline-block;
width: 100px;
height: 100px;
}
.row_2 img {
display: inline-block;
width: 30px;
height: 30px;
}

Answer 1

我相信这就是你想要的。为了遵守 W3C 标准的块级元素不能嵌套在内联的元素中，但是 inline-block 允许您这样做。唯一需要注意的是，inline-block 的显示值并不完全向后兼容浏览器，特别是 IE7 及以下。

.row_1 img{
    width: 100px;
    height: 100px;
}

.row_2 img{
    width: 30px;
    height: 30px;
}

.row_1,
.row_2{
    display: inline-block;
}

.row_2 img{
    padding-top: 5px;
    display: block;
}

.row_2 img:first-child{
    padding: 0;
}