Print format cannot fix position in the div html

Question

I have a problem printing image in certain position formats. I need to put every 8 images on 1 page to show in the print preview.

I use below this sample coding this format to do the setting for every div image position，because 4 rows on 1 page, so I've tried to use 100% divide 4, then get the height value is 25%, but it cannot work in the print preview second page :

This is my jsfiddle, my problem will show in the jsfiddle https://jsfiddle.net/d6h3wfer/

In the jsfiddle result problem to show second page in the print preview cannot get 8 images on 1 page.

Hope someone can guide me on how to solve this problem. Thanks.

*Each div style needs the same format because in the future I need to put in the PHP format to loop each picture using the same current image div style format.

Admin · Answer

I was able to solve it with a table:

window.print();

@media print {
  @page {
    size: portrait;
  }
}

table {
  width: 100%;
}

tr {
  height: 25%;
}

td {
  width: 50%;
}

img {
  width: 100%;
}

Print format cannot fix position in the div html

1 Answers