如何在html中并排显示图像

Question

对于预览时的以下代码，我只能垂直看到附加的图像，但也想水平显示（取决于数量）。 以下三张图像被视为一张图像，一张完成打印/预览下一张水平

有人可以帮我吗？

 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

这是您可以玩的样本。 希望这会有所帮助并让我知道。 我使用 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>

Answer 2

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