分栏分页

Question

我有一个应用程序，我可以用它自定义我自己的代码，让它满足我的需求。以前可以正常打印，但突然停止了。我让它打印拣货订单，并需要按特定的顺序排列它们，它正在这样做。

现在的问题是，它会在页面上放置尽可能多的订单，页面最多只能有 10 个订单。我有时会一次打印 40 个或更多订单。

它是两列，左侧有 5 或 6 个订单，右侧有 5 或 4 个订单（对我来说哪一个都没关系），但当它进入下一页时，它只在右侧列上显示订单。

我不确定这是否有意义，但会分享下面的代码。

@media print {
  @page {
    size: 215.9mm 279.4mm;
    margin:0;
    padding:0;
  } 
  
.product-container:nth-child(10n) {
   page-break-after: always;
}

}

.liquidated {
  column-count: 2;
  column-gap: 0px;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: black;
  font-size:14px;
  page-break-after: always;
}

.product-container:nth-child(6n){
    page-break-after: always;
}

.product-wrapper {
    border-bottom: 2px solid black;
    padding:5px;
    break-inside: avoid-column;

}
.order-index {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.circle {
    height: 25px;
    width: 25px;
    border-radius: 64px;
    flex-shrink: 0;
    position: relative;
    border-style: solid;
    border-width: 1px;
    padding-top: 2px;
}

.number{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.ordername {
    font-weight: bold;
}

.checkbox {
    border: 1px solid black;
    padding:5px;
    margin:0px;
    display:inline-block;
    top: 1px;
    position:relative;
}

.container {
  max-width: 100%;
}

这是 HTML

{% assign sort_orders = orders | sort: 'total_weight' %}
{% for order in sort_orders %}
 {% assign items_count = 0 %}
    {% for lineitem in order.line_items %}
        {% assign items_count = items_count | plus: lineitem.quantity %}   
    {% endfor %}  
    <div class="product-container">
        
    {% if items_count %}
        <div class="product-wrapper">
            
            <span class="ordername">{{ order.name }}</span>
            {% assign sorted_lineitems = order.line_items | sort : 'sku' %}
            {% for lineitem in sorted_lineitems %}
                  <div class="product">
                    {% assign variant_title = lineitem.variant_title %}
                     {% if variant_title != "Default Title" %}
                       <span class="checkbox"></span> {{ variant_title }}
                    {% endif %} 
                     ({{ lineitem.quantity }})

                    </div>
            {% endfor %}
            
            <b>{{ "Total quantity: " }}</b> {{ items_count }} pcs
            
            <b>Weight</b> {{ order.total_weight | divided_by: 1000 | times: 35.27 | round: 2 }} oz
            
            <div class="order-index">
                <div>{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</div>
                <div class="circle">
                     <span class="number">{{ forloop.index }}</span>
                </div>
            </div>
        </div>
    {% endif %}
    </div>
{% endfor %}

我尝试了不同的分页符术语，并在整个网络和 youtube 上进行搜索，但没有找到解决方案。

Answer 1

好的，所以想要这种类型的布局，那么这就是你需要做的，假设你循环的 div 是

**product-wrapper**

添加这个 Css

.product-wrapper{
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
}

这个CSS将帮助您实现您想要的设计