CSS-其他页面中打印条中的横向html页面_Html_Css_Printing

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

html css printing

CSS-其他页面中打印条中的横向html页面,html,css,printing,Html,Css,Printing,我做了一个简单的页面，在这里我需要一些分页符和横向打印的页面。问题是，上一页中的所有页面都在滑动。这是我的密码： <html> <head> <style> .break { page-break-after: always; } .page { width: 29.7cm; height: 21cm; ma

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

<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>


.休息{
分页符后：始终；
}
.第页{
宽度：29.7cm；
身高：21厘米；
保证金：0；
填充：0；
}
@媒体印刷品{
.集装箱{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
}
}
同侧隐翅虫（…）turpis。
矢状缝。
杜内克·法雷特拉（…）库雷；

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

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

有什么想法吗

提前谢谢

尝试强制page vreak通过以下路径：

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

（也可以在打印CSS中指定横向，而不是通过旋转，如下所示：

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

)

？

试过了，还是一样。编辑效果很好。在IE中看起来也不错，只是有点小问题，但我能解决。非常感谢。