如何在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;