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标准，块级元素不能嵌套在内联元素中，但是内联块允许你这样做。唯一需要注意的是内联块的显示值不完全与浏览器向后兼容，特别是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;
}

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

1 个答案: