Veitch Veitch - 4 months ago 7
HTML Question

Image at either end with paragraphs in between

I've been trying to make a page that has two images on either side and a paragraph of text to go with each image. I wanted each paragraph to go next to their image and stop just short of the middle of the page, this part I can do.

However, I also wanted the text to move when the window was resized, so that the width shortened while the height grew so all of the text was still shown.



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





This is hard to explain but I hope this helps.

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

Answer

Is this what you need?

 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>

Comments