-2

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

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
Rushi M
  • 119
  • 1
  • 7
  • 2
    It is useful to put the code as a snippet and not an image and also a brief sketch of a desired result. – Tim Friedland Jun 05 '20 at 18:41
  • 1
    Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](https://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](https://stackoverflow.com/help/dont-ask). Further, please read the [Stack Overflow question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist). Also learn how to post [Minimal, Complete, and Verifiable Examples](https://stackoverflow.com/help/minimal-reproducible-example). – Jay Gray Jun 06 '20 at 11:47

1 Answers1

0

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>
Xenvi
  • 887
  • 5
  • 10
  • How would I make it so that it flows to the next column so that I can print out the page – Rushi M Jun 06 '20 at 17:07
  • right now it is all in one column so how can I fill up the rest of the page @Xenvi – Rushi M Jun 06 '20 at 17:08
  • @RushiM I have edited my post with an explanation and code example! If you have any other questions please don't hesitate to ask (= – Xenvi Jun 07 '20 at 01:49