html - 图片在两端，中间有段落

Question

我一直在尝试制作一个页面，两侧各有两张图片，每张图片都有一段文字。我希望每个段落都紧挨着他们的图片并停在页面中间，这部分我可以做到。

但是，我还希望在调整窗口大小时移动文本，以便在高度增加的同时宽度缩短，从而仍然显示所有文本。

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