Question

我有一个侧面显示排列在网格中的3个div元素。侧面很好地显示在屏幕上。但是，在尝试打印页面时，元素重叠或根本不显示。我使用以下css：

@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了很多，但我没有让它工作。

Answer 1

当我转到你的链接时，我注意到了一件事。我的浏览器缩放率为120％，你提到的情况发生在图像重叠并且很混乱但是当我进行100％缩放时它工作得很好。那么也许是分辨率/缩放问题？

尝试使用Bootstrap并查看是否可行。

安排css div元素进行打印

1 个答案: