css - 在同一个打印件上打印一个横向 div 和一个纵向 div

Question

我想知道是否可以横向打印网页的某些部分而纵向打印其他部分。如果可以，怎么做？

更多详情:我目前正在做一个网页，我们可以在其中找到一个图像(在一个 div 中)和一个表格(在另一个 div 中)。图像在一页上，表格在另一页上。有时我的图像需要横向打印。 table 总是纵向的。所以我现在所做的是: ` $distanceY) { ?>

                        <div  id="plancompletpaysage" class="impression-paysage">
                            <?php
                            echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '"  usemap="places" />';
                            ?>
                        </div>
                        <?php
                    }
                    if ($distanceX < $distanceY) {
                        ?>                   
                        <div  id="plancompletportrait" class="impression-portrait">
                            <?php
                            echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '"  usemap="places" />';
                            ?>
                        </div>
                        <?php
                    }
                    ?>`

我试试看:

<style>
 @media print{
            @page paysage{
                size: landscape;
            }

            .impression-paysage{
                page: paysage;
            }

        }  
</style>

使用它没有任何改变。一切都保持纵向。

感谢您的帮助。

编辑:这是我在@Mordecai 的帮助下找到的解决方案:

                .impression-paysage{

                display: block;
                margin-top:120px;

                margin-left:-100px;
                text-align:center;
                width:140%;
                height:160%;
                transform: rotate(-90deg);
                zoom: 150% ;

            }

所以第 1 步:调整 div 的大小。第二步:旋转div。

Answer 1

页面打印布局默认为纵向。

要在横向打印 div .impression-paysage，您可以使用 transform:rotate(90deg) 或 transform:旋转(-90 度)。

@media print {
  .impression-paysage {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}