スパンのブロックで写真を上下に重ねる方法は？

Question

基本的に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; 
} 

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