양쪽 끝에 단락이있는 이미지

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>