排列css div元素進行打印

我有一面顯示排列在網格中的3個div元素。屏幕上顯示的一面很好。但是，當試圖打印頁面時，元素重疊或根本不顯示。我用下面的CSS：排列css div元素進行打印

@media print { 
    #navigation { display: none; } 
} 

@page { 
    margin: 0.05cm; 
} 

#maps { 
    width: 100%; 
    height: 100vh; 
    padding: 0; 
    display: inline-block; 
} 
#map { 
    width: 49%; 
    height: 100%; 
    padding: 0; 
    display: inline-block; 
    vertical-align: top; 
} 
#map_profiles { 
    width: 49%; 
    height: 100%; 
    padding: 0; 
    display: inline-block; 
    vertical-align: top; 
} 
#map_hp { 
    width: 100%; 
    padding: 0; 
    height: 49%; 
    display: inline-block; 
    vertical-align: top; 
} 
#map_sp { 
    width: 100%; 
    padding: 0; 
    height: 49%; 
    display: inline-block; 
    vertical-align: bottom; 
}

完整的例子，可以發現： http://www.tikey.de/neuseeland/vergleich.html

DIV的地圖包含了所有的人。在內部，map和map_profiles彼此相鄰，map_profiles包含彼此重疊的map_hp和map_sp。它看起來好像在屏幕上，但是在打印時，它完全搞砸了。我試着玩了很多CSS，但是我沒有得到它的工作。

來源

2017-01-17 Thomas

我注意到@ @ print print {}部分已經在你發佈的第3行中關閉了。如果真的在CSS文件中出現這種情況，這可能是您遇到麻煩的原因。（我寫這與這是你的打印樣式表的假設？） – Johannes

不，@media打印部分僅用於在打印時隱藏導航部分。 – Thomas

aha。那麼，也許主元素的'vh'高度單位不能很好地工作，如果你在最後兩個元素中使用「vertical-align」，你應該給它們「display：inline-block」 – Johannes

我注意到了一件事，當我去你的鏈接。我的瀏覽器縮放比例達到了120％，你提到的發生的地方是圖片重疊並且很混亂，但是當我進行100％縮放時，它的效果很好。所以也許這是一個分辨率/縮放問題？

嘗試使用Bootstrap並查看是否可行。

來源

2017-01-17 11:55:34

事實上，如果我選擇60％的打印比例，我至少可以打印頁面。但是，這也意味着頁面上有很多空白空間。不知道爲什麼，但。 – Thomas

排列css div元素進行打印

回答

相關問題