Question

我做了一个简单的页面，我想要一些分页符和横向页面用于打印。问题是，所有页面都在上一页中滑动。这是我的代码：

<html>
<head>
    <style>
        .break {
            page-break-after: always;
        }
        .page {
            width: 29.7cm;
            height: 21cm;
            margin: 0;
            padding: 0;
        }
        @media print {
            .container {
                 -webkit-transform: rotate(-90deg); 
                 -moz-transform:rotate(-90deg);
                 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            }
        }
    </style>
</head>
<body>
    <div class="page break container">
    Lorem ipsum (...) turpis.
    </div>
    <div class="page break container">
    Nulla sagittis (...) lectus.
    </div>
    <div class="page container">
    Donec pharetra (...) Curae;
    </div>
</body>
</html>

打印预览的结果如下所示：

我尝试修改宽度和高度以及其他一些内容，但唯一的区别是在预览中绘制文本的位置。

有什么想法吗？

提前致谢！

Answer 1

试图通过以下方式强行翻页：

@media print {
.break {page-break-after: always;}
}

（也指定打印CSS中的横向，而不是旋转它，如下所示：

@media print{@page {size: landscape}}

）？

CSS - 在其他页面中打印单页中的横向html页面

1 个答案: