How to put text next to images when using while loop and additional components are being added on each iteration

Question

I want to display an image to the right of my text.

I currently have code that does that but as the while loop iterates it keeps on adding the text and image to the right of the original one.

I am using php so I am echoing everything.

How do I make it so it works like this:

text image
text image
text image
text image 
text image

Here is my code:

code

Answer 1

One solution could be to use flexbox and add the styles 'display: flex; flex-wrap: wrap;' to the parent div

 <div style='display:flex; flex-wrap:wrap;'> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text</p> <p style='float:left;'>image</p> </div> <div style='display:flex; flex-wrap:wrap;'> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text</p> <p style='float:left;'>image</p> </div> <div style='display:flex; flex-wrap:wrap;'> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text</p> <p style='float:left;'>image</p> </div>

To make them flow to the next column when exceeding the height, instead of putting display: flex; and flex-wrap: wrap; on each individual div, wrap all of the divs with a parent container and add display flex, flex wrap, and flex direction column to the parent. Make sure to specify a height.

What this does is arrange each child element in a column and when they reach the bottom of the parent div, it will wrap into the next column. You can look more into flexbox to see how you can further arrange the columns if needed. Hope this helps!

 <div style='display:flex; flex-direction:column; flex-wrap:wrap; height: 200px; background:#ccc;'> <div> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text1</p> <p style='float:left;'>image</p> </div> <div> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text2</p> <p style='float:left;'>image</p> </div> <div> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text3</p> <p style='float:left;'>image</p> </div> <div> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text4</p> <p style='float:left;'>image</p> </div> <div> <p style='font-size:1.05em; color=#0e3c68; font-weight:bold; float:left;'>text5</p> <p style='float:left;'>image</p> </div> </div>