php - 使用while循环时如何将文本放在图像旁边，并且每次迭代都会添加其他组件

Question

我想在我的文本右侧显示一个图像。

我目前有执行此操作的代码，但是随着 while 循环的迭代，它不断将文本和图像添加到原始循环的右侧。

我正在使用 php，所以我正在呼应所有内容。

我如何使它像这样工作：

text image
text image
text image
text image 
text image

这是我的代码：

代码

Answer 1

一种解决方案是使用 flexbox 并添加样式 'display: flex; 弹性包装：包装；' 到父 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>

让它们在超过高度时流到下一列，而不是放置 display: flex; 和 flex-wrap: 换行；在每个单独的 div 上，使用父容器包装所有 div，并将显示 flex、flex wrap 和 flex 方向列添加到父容器。确保指定高度。

这样做的目的是将每个子元素排列在一列中，当它们到达父 div 的底部时，它将换行到下一列！如果需要，您可以更多地查看 flexbox 以了解如何进一步排列列。希望这可以帮助！

<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>