Упорядочить элементы css div для печати

У меня есть сторона, показывающая 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 maps содержит все остальные. Внутри, map и map_profiles находятся рядом друг с другом и map_profiles содержит map_hp и map_sp, которые находятся друг над другом. Он выглядит хорошо на экране, но при печати он полностью испорчен. Я пытался играть с css много, но я не получил его работать.

1 ответ

  1. Я заметил одну вещь, когда я пошел на вашу ссылку. Мой зум браузера был на 120%, и то, что вы упомянули, произошло, когда изображения перекрывались и были грязными, но когда я пошел на 100% зум, это сработало хорошо. Так, может быть, это проблема разрешения / масштабирования?

    Попробуйте использовать Bootstrap и посмотрите, будет ли это работать.