javascript - 打印格式无法固定在 div html 中的位置

Question

我在以某些位置格式打印图像时遇到问题。我需要将每 8 张图像放在一页上以在打印预览中显示。

我在下面这个示例编码中使用这种格式对每个div图像位置进行设置，因为1页上有4行，所以我尝试使用100%除以4，然后得到高度值为25%，但是它不能在打印预览第二页中工作:

<div style="height:25%;width:45%;display:inline-block;">
<img style="max-width: 100%;max-height: 90%;height:100%;width:100%" id="img_8" class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
</div>

这是我的jsfiddle，我的问题会显示在jsfiddle https://jsfiddle.net/d6h3wfer/

在 jsfiddle 结果问题中，在打印预览中显示第二页无法在一页上显示 8 张图像。

希望有人能指导我如何解决这个问题。谢谢。

Answer 1

我能够用表格解决它:

window.print();

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

table {
  width: 100%;
}

tr {
  height: 25%;
}

td {
  width: 50%;
}

img {
  width: 100%;
}

<table>
  <tr>
    <td>
      <img id="img_8" class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <img class="img_8" src="https://images4.alphacoders.com/108/thumb-350-1085603.jpg">
    </td>
    <td>
      <img class="img_8" src="https://wallpapercave.com/wp/wp5828605.jpg">
    </td>
  </tr>
</table>