お互いの画像を右下に表示する

Question

申し訳ありませんが、これは面倒な質問のようですが、私のものとはちょっと違うので、ここで助けが必要です。

だから、私は2枚の画像を得た：

さて、問題があることでAとBは、私は彼らがお互いの下に表示させたい、と私は画像Aの右側にテキストを配置する必要があるとB.私はいくつかの理由で画像Aの後にテキストを配置することはできません

<img src="A.jpg"> 
<img src="B.jpg"> 

<p> Text of A, at the right of A </p> 
<p> Text of B, at the right of B </p> 

、と私はこれを続行する方法がわからない：私は一例でありここで、画像AとBを入れた後、テキストを置くことができます方法。

ありがとうございました！

P.S：私は、ユーザーがサイズを変更したときに絶対に大きな混乱を招くような、絶対的なものではなくクリーンなバージョンを探しています。

Answer 1

使用flex

#wrapper img{ 
 
    width: 25%; 
 
    height: 200px; 
 
} 
 
div#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
div#wrapper img:nth-child(1n){ 
 
\t order: 1; 
 
    flex: 0 0 calc(50% - 10px); 
 
} 
 
div#wrapper img:nth-child(2){ 
 
\t order: 3; 
 
    flex: 0 0 calc(50% - 10px); 
 
} 
 
div#wrapper p:nth-child(3n){ 
 
\t order: 2; 
 
    flex: 0 0 calc(50% - 10px); 
 
} 
 
div#wrapper p:nth-child(4n){ 
 
\t order: 4; 
 
    flex: 0 0 calc(50% - 10px); 
 
}

<div id="wrapper"> 
 
    <img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt=""> 
 
    <img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" alt=""> 
 
    <p> Text of A, at the right of A </p> 
 
    <p> Text of B, at the right of B </p> 
 
</div>

この情報がお役に立てば幸い！