如何在 html 中并排显示图像

Question

对于下面的代码，在预览时我只能看到垂直方向的图像see attached，但也想水平方向显示（取决于数量）。以下三张图片被视为一张图片，一张完成 prints/preview 下一张水平

有人可以帮我解决这个问题吗？

htp.p('<style>
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  box-sizing: border-box;
 
}
</style>
');  


FOR x in 1 .. 10 
loop

htp.p(' <div class="column">
<div class="row">
  
<table>
<td>

<tr>
<td>
<img style="text-align: center;" alt="TRENDEST_LOGO"
         src="https://lh3.googleusercontent.com/Ifrqww75cpmhI3mYsk1C28vYmlwwOi_VvuTyrH0xBEKPqed56lwrJINLZJNhFJ1zLSPFDg=s170"
   width="200"  height="50" ></td>

</tr>
<tr>
<td>
<img style="text-align: center;" alt="TRENDEST_BARCODE"
       src="https://barcode.tec-it.com/barcode.ashx?data='||htf.escape_sc(bcode) ||'&code=Code128&translate-esc=true&unit=Fit&hidehrt=True&modulewidth=1" 
       width="200" height="80"></td>
</tr>
<tr>
<td>
  <a title="ITEMS">
    SHIRT&nbsp;&nbsp;&nbsp;&nbsp;&#8377;230                          
  </a></td>
</tr>

</td>
</table>
</div>
</div> ');

end loop;

Answer 1

创建一个div容器然后里面的元素应该有display: inline-block;

Answer 2

这是您可以试玩的样本。希望这会有所帮助并让我知道。我用 flex 然后在里面放一个空隙然后把它包起来。

.wrapper {
  display: flex;
  grid-gap:10px;
  flex-wrap: wrap;
  
  }

<div class="wrapper">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrUH3Siiaj4-KM-a4ZhfESeNb9ZmocLBJuXVgVZtEfMQLZYt6jxbEuvloqE-aNvy9OCU&usqp=CAU" >
</div>

如何在 html 中并排显示图像

How to display image side by side in html

html

css

oracle-apex