両脇の段落のある画像

Question

私は、どちらの側にも2つのイメージがあり、各イメージにはテキストの段落があるページを作ろうとしています。私は各段落を自分のイメージの隣に置いて、ページの真ん中で止めることをやりました。この部分は私ができることです。

しかし、ウィンドウのサイズが変更されたときにテキストを移動して、幅が短くなるようにして、高さが増え、すべてのテキストがまだ表示されるようにしたかった。

<img src="http://placehold.it/100x100" style="float:left;width:100px;height:auto;"/> 
 
<p>Text for Image 1</p> 
 

 
<img src="http://placehold.it/100x100" style="float:right;width:100px;height:auto;"/> 
 
<p>Text for Image 2</p>

これは説明するのは難しいですが、私はこのことができます願っています。

[Image1] (text1) (text2) [Image2] 

Answer 1

thisは必要ですか？

body{ 
 
    display:flex; 
 
    align-items:flex-start; 
 
} 
 

 
div{ 
 
    display:flex; flex:1; 
 
} 
 

 
div:nth-child(2n){ 
 
    justify-content: flex-end; 
 
} 
 

 
p{ 
 
    padding:0 1em; 
 
    margin:0; 
 
}

<div> 
 
    <img src="http://placehold.it/250x150"> 
 
    <p>Lorem ipsum</p> 
 
</div> 
 
<div> 
 
    <p>Lorem ipsum</p> 
 
    <img src="http://placehold.it/250x150"> 
 
</div>