1

<div style="display: inline-block;">
  <img src="one.jpg">
  <p style="word-wrap: break-word;overflow-wrap: break-word;">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
  </p>
</div>

I need to put many images in a row but the text is taking all the space so i want these text to flow down to the image. I have tried many things like flex,align but none worked for me.

One of the page i referred is :this

sg717
  • 53
  • 6

1 Answers1

0

You should set the width of the container and use flex-wrap to maintain the desired width, even if there are more items and they don't fit in the same row.

Try this fiddle: 

img {
  width: 100%;
  height: auto;
}

div.main > div {
   width: 50%;
}

div.main {
  display: flex;
  flex-wrap: wrap;
}
<div class="main">
  <div>
  <img src="https://c8.alamy.com/comp/R0H9GD/future-technology-background-abstract-digitally-generated-imag-R0H9GD.jpg">
  <p style="word-wrap: break-word;overflow-wrap: break-word;">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
  </p>
</div>
<div style="display: inline-block;">
  <img src="https://c8.alamy.com/comp/R0H9GD/future-technology-background-abstract-digitally-generated-imag-R0H9GD.jpg">
  <p style="word-wrap: break-word;overflow-wrap: break-word;">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
  </p>
</div>
<div style="display: inline-block;">
  <img src="https://c8.alamy.com/comp/R0H9GD/future-technology-background-abstract-digitally-generated-imag-R0H9GD.jpg">
  <p style="word-wrap: break-word;overflow-wrap: break-word;">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
  </p>
</div>
</div>
Era
  • 131
  • 4