CODEWITHSUNDEEP
htmlcss
Veitch
Veitch

Reputation: 27

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]

Upvotes: 0

Views: 42

Answers (1)

vsync
vsync

Reputation: 130750

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>

Upvotes: 1

Related Questions