如何让并排Div在PDF分页时作为整体块展示？

要让两列并排的.row块作为整体不被分页拆分，只需利用CSS的分页控制属性即可解决，以下是具体方案：

方案一：直接给Flex容器添加分页避免属性 #

修改CSS，给.row加上page-break-inside: avoid属性，这个属性会告诉DomPDF不要在该元素内部插入分页符，确保整个row块要么完整显示在当前页，要么整体移到下一页。

修改后的CSS：

.row {
  display: flex;
  flex-wrap: nowrap;
  page-break-inside: avoid; /* 关键：避免容器内部分页 */
}

.column {
  flex: 50%;
}

方案二：用父容器包裹强制整体分页 #

如果方案一因DomPDF对flex容器的属性支持问题不生效，可以给row块套一个父容器，给父容器添加分页避免属性：

修改后的HTML结构：

<div class="page-group">
  <div class="row">
    <div class="column">
      <ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
      </ol>
    </div>
    <div class="column">
      <ol>
        <li>FirstB</li>
        <li>SecondB</li>
        <li>ThirdB</li>
        <li>FourthB</li>
      </ol>
    </div>
  </div>
</div>

对应的CSS：

.page-group {
  page-break-inside: avoid; /* 让整个包裹块作为分页整体 */
}

.row {
  display: flex;
  flex-wrap: nowrap;
}

.column {
  flex: 50%;
}

注意事项 #

• 确保使用较新版本的DomPDF，旧版本对CSS分页属性和flex布局的支持不完善；
• 若列表内容为动态生成，可配合page-break-before: auto避免不必要的提前分页。

内容的提问来源于stack exchange，提问作者jose