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

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

ДИВОЙ карта содержит все остальные. Внутри, map и map_profiles находятся рядом друг с другом, а map_profiles содержит map_hp и map_sp, которые находятся друг над другом. Он выглядит хорошо на экране, но при печати он полностью испорчен. Я пробовал играть с css много, но я не получил его работать.

Answer 1

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

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