Answers:
在CSS中，您可以设置@page属性，如下所示。
@media print{@page {size: landscape}}@page是CSS 2.1规范的一部分，但是size问题的答案并未突出显示@page {size：landscape}是否已过时？：
CSS 2.1不再指定size属性。CSS3 Paged Media模块的当前工作草案确实指定了它（但这不是标准的或不可接受的）。
如前所述，size选项来自CSS 3草案规范。从理论上讲，可以将其设置为页面大小和方向，尽管在我的示例中省略了页面大小。
该支持与在Firefox中开始提交的错误报告非常混杂，大多数浏览器不支持它。
它似乎可以在IE7中工作，但这是因为IE7会记住用户在打印预览中最后选择的风景或肖像（仅重新启动浏览器）。
本文确实提出了一些建议的解决方法，使用JavaScript或ActiveX将密钥发送给用户浏览器，尽管它们不是理想选择，并且依赖于更改浏览器的安全设置。
或者，您可以旋转内容而不是页面方向。这可以通过创建样式并将其应用于包含这两行的主体来完成，但这也存在一些缺点，从而造成许多对齐和布局问题。
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>我发现的最终替代方法是在PDF中创建横向版本。您可以指向，以便当用户选择打印时它会打印PDF。但是，我无法在IE7中自动打印。
<link media="print" rel="Alternate" href="print.pdf">总之，在某些浏览器中，使用@page size选项相对容易，但是在许多浏览器中，没有确定的方法，这取决于您的内容和环境。这也许就是为什么Google文档在选择打印后会创建PDF，然后允许用户打开并打印该PDF的原因。
@page size似乎不适用于所有现代浏览器，仅适用于Firefox。据我所知，Chrome和Opera都无视这一点。
我的解决方案：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>这部作品在IE，Firefox和Chrome
classdiv出现在横向页面而不是整个页面上怎么办？
仅仅旋转页面内容是不够的。这是适用于大多数浏览器（Chrome，Firefox，IE9 +）的正确CSS。
首先将主体设置margin为0，因为否则页边距将大于您在“打印”对话框中设置的页边距。还要设置background颜色以使页面可视化。
body {
margin: 0;
background: #CCCCCC;
}margin，border并且background是可视化页面所必需的。
padding必须设置为所需的打印边距。在打印对话框中，您必须设置相同的边距（在此示例中为10mm）。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}A4页面的尺寸为210mm x 297mm。您需要从尺寸中减去打印边距。并设置页面内容的大小：
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。因此，其中一些将在两页上打印277毫米高的内容。第二页将为空。使用276mm更安全。
我们不需要任何margin，border，padding，background在打印页面上，所以其删除：
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}请注意，变换的原点是0 0！此外，横向页面的内容必须向下移动276mm！
另外，如果您同时使用纵向和横向页面，IE会缩小页面。我们通过将其设置-ms-zoom为1.665来修复它。如果将其设置为1.6666或类似的内容，有时页面内容的右边框可能会被裁剪。
如果您需要IE8-或其他旧的浏览器支持，您可以使用-webkit-transform，-moz-transform，filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但是对于足够现代的浏览器来说，则不是必需的。
这是一个测试页：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>@page规则的范围从CSS2减少到CSS2.1。据说完整的CSS2 @page规则仅在Opera中实现（即使在那时也是如此）。我自己的测试表明IE和Firefox根本不支持@page。根据现已过时的CSS2规范第13.2.2节，可以覆盖用户的方向设置和（例如）在“横向”中强制打印，但是相关的“ size”属性已从CSS2.1中删除，这与事实相符当前没有浏览器支持。它已在CSS3页面媒体模块中恢复，但请注意，这只是一个工作草案（截至2009年7月）。
结论：暂时忘记@page。如果您觉得您的文档需要横向打印，请问问自己是否可以使设计更流畅。如果确实不能这样做（例如，可能是因为文档包含具有很多列的数据表），则需要建议用户将方向设置为“横向”，并概述在最常见的浏览器中的操作方式。当然，某些浏览器具有按比例打印（按比例缩小）功能（例如Opera，Firefox，IE7），但建议不要依赖具有此功能或已打开电源的用户。
尝试将其添加到您的CSS中：
@page {
size: landscape;
}您也许可以使用CSS 2 @page规则，该规则允许您将'size'属性设置为landscape。
您还可以使用非标准的仅IE的CSS属性write-mode
div.page {
writing-mode: tb-rl;
}我用“横向”设置创建了一个空白的MS文档，然后在记事本中将其打开。复制以下内容并将其粘贴到我的html页面中
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>打印预览以横向尺寸显示页面。这似乎在IE和Chrome上运行良好，未经FF测试。
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>如果要将此样式应用于表，请使用此样式类创建一个div标签，然后在该div标签内添加表格标签，并在最后关闭div标签。
该表仅以横向打印，所有其他页面仅以纵向模式打印。但是问题是，如果表大小大于页面宽度，那么我们可能会丢失一些行，有时还会丢失标题。小心。
祝你有美好的一天。
谢谢Naveen Mettapally。
我尝试了Denis的答案并遇到了一些问题（在使用横向页面后，纵向页面无法正确打印），所以这是我的解决方案：
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
@media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>