Question

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

更多详细信息：我当前正在做一个网页，我们可以在其中找到一个图像（在一个div中）和一个表（在另一个div中）。该图像在一页上，而表格在另一页上。有时我的图像需要横向打印。桌子始终是纵向的。因此，我目前所做的是： ` $ 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% ;

            }

第一步：调整div的大小。第二步：旋转div。

Answer 1

默认情况下，页面打印布局为纵向。

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

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

在同一张照片上打印横向div和纵向div

1 个答案: