欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css 固定橫向打印

夏志豪2年前10瀏覽0評論
CSS 固定橫向打印 在網頁中,有時需要將內容垂直方向平分在多頁里進行打印,而在橫向方向上保持內容連續不分頁,這就需要利用 CSS 實現固定橫向打印。下面我們來看看怎樣實現。 首先,我們需要利用 @media print 和 landscape 將頁面轉為橫向打印模式。
@media print {
@page {
size: A4 landscape;
}
}
然后我們需要利用 CSS 對橫向打印頁面做出特殊處理。我們可以利用 CSS3 中的 column-count 屬性,將內容分割成多列,在橫向打印頁面上從左到右依次排列。以下是一個簡單的實現。
@media print {
.print-column {
column-count: 2;
}
}
在上述代碼中,我們給橫向打印頁面的內容包裹了一個 class 名稱為 print-column 的 div,然后對其應用 column-count 屬性,將內容分成兩列。 不過,在利用 column-count 屬性進行橫向打印時,我們可能會遇到一些問題。比如: - 如果最后一頁內容不夠多,內容將會集中在一列,而另一列則被留空。 - 內容中如果有 table 或者圖片,可能會因為 column-count 的分欄而造成排版混亂。 這時候我們可以利用 column-fill 屬性,讓分欄內容均勻分配到多列中。設置 column-fill 屬性為 balance 即可。
@media print {
.print-column {
column-count: 2;
column-fill: balance;
}
}
通過以上 CSS,我們成功利用 CSS 實現了固定橫向打印效果。現在,你可以在橫向打印時利用 column-count 和 column-fill 屬性,讓內容連續不分頁,方便閱讀。