For the below code when previewing I'm able to see images only verticallysee attached but want to show horizontally too(depending on the quantity). below three images are considered as one image and that one completes prints/preview next one horizontally

Can someone help me on this?

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 >
<div >
  
<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;

CodePudding user response：

Heres your sample you can play with. hope this will help and let me know. I use flex then put a gap in it and wrap it.

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

<div >
  <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>

CodePudding user response：

Create a div container and then the elements inside should have display: inline-block;