使用while循環時如何將文本放在圖像旁邊，並且每次迭代都會添加其他組件

Question

我想在文本右側顯示圖像。

我目前有執行此操作的代碼，但是隨着 while 循環的迭代，它不斷將文本和圖像添加到原始循環的右側。

我正在使用 php 所以我正在呼應一切。

我如何使它像這樣工作：

text image
text image
text image
text image 
text image

這是我的代碼：

代碼

Answer 1

一種解決方案是使用 flexbox 並添加 styles '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>