圖片兩端之間的段落在

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>