Question

我有一些类别的产品，需要将其作为订单打印在纸上。

我的想法是获得以下布局（横向）：

Page 1:
+-----------+
| 1 | 4 | 7 |
| 2 | 5 | 8 |
| 3 | 6 | 9 |
+-----------+

Page 2:
+-----------+
| 10| 13| 16|
| 11| 14| 17|
| 12| 15| 18|
+-----------+

到目前为止，我尝试过的CSS对我不起作用。

当前CSS：

<style type="text/css">
    @media print {
        .noprint {
            display:none;
        }
    }

    .info {
        width: 100%;
        padding: 25px;
        font-size: 20px;
        border: 3px solid #000;
        text-align: center;
        margin-bottom: 30px;
    }

    .image {
        text-align: center;
        padding: 20px;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: verdana;
        font-size: 12px;
    }

    .category {
        column-count: 3;
        column-gap: 20px;
    }

    .items {
        column-count: 3;
        column-gap: 20px;
        column-fill: auto;
        height: 80vh;
    }

    .page {
        page-break-after: always;
        clear: both;
    }

    .item {
        width: 100%;
        margin: 0;
    }

    .header {
        width: 100%;
    }

    .header > * {
        float: left;
        background-color: #E0E0E0;
        padding: 5px;
    }

    .name_header {
        width: 70%;
        font-weight: bold;
        text-align:center;
        font-size: 15px;
        float: left;
    }

    .pieces_header {
        width: 30%;
        font-weight: bold;
        text-align:center;
        font-size: 15px;
        float: left;
    }

    .product {
        width: 100%;
        margin: 0;
        -webkit-column-break-inside: avoid; /* Chrome, Safari */
        page-break-inside: avoid;           /* Theoretically FF 20+ */
        break-inside: avoid-column;         /* IE 11 */
        display:table;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    .name {
        width: 50%;
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .price {
        width: 25%;
        float: left;
        height: 40px;
        line-height: 40px;
        text-align: right;
    }

    .pieces {
        width: 25%;
        float: left;
        height: 40px;
    }

    .barcode {
        width: 100%;
        text-align: center;
    }
</style>

.page每25个产品都会插入

每个.barcode div都有一个EAN13产品作为XML。

一个产品循环：

<div class="items">
    <div class="item header">
        <div class="name_header">Andet</div>
            <div class="pieces_header">Antal</div>
        </div>
        <div class="item product">
            <div class="name">13</div>
            <div class="price">kr. 29,95</div>
            <div class="pieces"></div>
            <div class="barcode">
            </div>
        </div>
    </div>
</div>

Answer 1

这是一个可以在屏幕上显示的示例，应该可以在印刷版中使用：

body { margin: 0 }

@media screen {
   .container {
     display: flex;
     flex-direction: column;
     height: 100vh;
     flex-wrap: wrap;
   }
   .container div {
     box-sizing: border-box;
     height: 33.3vh;
     border: 1px solid red;
   }
}

@media print {
   .container {
     display: flex;
     flex-direction: column;
     height: 100vh;
     flex-wrap: wrap;
   }
   .container div {
     box-sizing: border-box;
     height: 33.3vh;
     border: 1px solid red;
   }
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

注意，我没有使用您的代码来保持机制的清晰。看到它在这里工作：

http://jsfiddle.net/tobyl/bec6sryf/10/

要记住的一点是，由于您要指定特定的页面尺寸，因此在打印中，您始终可以以毫米为单位指定尺寸：

@media print {
   .container {
     display: flex;
     flex-direction: column;
     height: 297mm;
     flex-wrap: wrap;
   }
   .container div {
     box-sizing: border-box;
     height: 99mm;
     width: 70mm;
     border: 1px solid red;
   }
}

同样，这是伪代码-实际上，您需要考虑页眉，页脚和边距，但这应该是一个很好的起点。

列出要在A4纸上打印的X个div

1 个答案: