[英]How to put text next to images when using while loop and additional components are being added on each iteration
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.我目前有执行此操作的代码,但是随着 while 循环的迭代,它不断将文本和图像添加到原始循环的右侧。
I am using php so I am echoing everything.我正在使用 php 所以我正在呼应一切。
How do I make it so it works like this:我如何使它像这样工作:
text image
text image
text image
text image
text image
Here is my code:这是我的代码:
One solution could be to use flexbox and add the styles 'display: flex;一种解决方案是使用 flexbox 并添加 styles 'display: flex; flex-wrap: wrap;'
弹性包装:包装;' to the parent div
到父 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;让它们在超过高度时流到下一列,而不是放置 display: flex; and flex-wrap: wrap;
和 flex-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.
在每个单独的 div 上,使用父容器包装所有 div,并将显示 flex、flex wrap 和 flex 方向列添加到父容器。 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.这样做是将每个子元素排列在一列中,当它们到达父 div 的底部时,它将换行到下一列。 You can look more into flexbox to see how you can further arrange the columns if needed.
您可以深入了解 flexbox 以了解如何在需要时进一步排列列。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.