时间戳

首页 > 解决方案 > CSS：无法建立分页符

css - CSS：无法建立分页符

问题描述

在尝试每隔 3 次建立分页符时，我遇到了很多障碍item_wrapper。我的元素结构和一般样式是这样的：

<div class='main_wrapper'>
  <div class='main'>
    <div class='main_details'>
      <div class='main_items_container'>
        <div class='main_items_wrapper'>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
          <div class='item_wrapper'>...</div>
        </div>
      </div>
    </div>
  </div>
</div>


.main_wrapper {
  display: inline-block
}

.main {
  position: relative
  width: 100%
  height: 100%
}

.main_items_wrapper {
  display: flex
  flex-direction: column
}

.item_wrapper {
  display: block
}

以下是我的初步解决方案：

@media print {
  .main_items_wrapper:nth-child(3n) {
    break-after: always
  }
}

请注意，我已尝试遵循许多帖子的建议 - 显示、宽度、高度、浮动等。不幸的是，我无法让它工作。任何帮助将不胜感激。先感谢您。

标签： css

解决方案

好吧，似乎与关联的 flexbox.main_items_wrapper是问题所在。当然吸取了教训。感谢那些花时间帮助我的人。

推荐阅读