對于預覽時的以下代碼，我只能垂直看到附加的影像，但也想水平顯示（取決于數量）。以下三張影像被視為一張影像，一張完成列印/預覽下一張水平
有人可以幫我嗎？
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 ₹230
</a></td>
</tr>
</td>
</table>
</div>
</div> ');
end loop;uj5u.com熱心網友回復：
這是您可以玩的樣本。希望這會有所幫助并讓我知道。我使用 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>uj5u.com熱心網友回復：
創建一個 div 容器，然后里面的元素應該有display: inline-block;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481802.html
上一篇：如何調整網格列？