如何在一個跨度塊中將照片放在另一個上面？

基本上pic1會有pic2 + pic3的高度。如何在一個跨度塊中將照片放在另一個上面？

而且所有pic1,2,3將在同一區塊，PIC2和PIC3和PIC1將具有相同的寬度在左，pic2,3右側

PIC1。

我的代碼，它不工作...請幫助：

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

來源

2012-04-16 qwr qwr

和你試過的CSS？ – trickyzter 2012-04-16 16:39:42

此外，您還沒有關閉您的span標籤：。你是否想要將row_2中包含的圖像向右對齊？ – trickyzter 2012-04-16 16:48:15

@trickyzter oops。 U是正確的，不遠處，我希望它靠近row_1，基本上，你可以把它看作是兩張圖片，一張圖片緊挨着另一張圖片，但是在正確的圖片上，中間有一個切口，使其進入2圖片，一個在另一個之上 – 2012-04-16 16:52:06

我相信這是你想要的。爲了堅持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; 
}

來源

2012-04-16 16:56:25 trickyzter

他正在尋找將第2行堆疊在第1行之上，不是？ – Paul 2012-04-16 16:57:20

我相信這是他想要的。 – trickyzter 2012-04-16 17:03:29

你是對的，我誤解了他的帖子。 – Paul 2012-04-16 17:04:16

如何在一個跨度塊中將照片放在另一個上面？

回答

相關問題