印刷用の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; 
} 

で完全な例を見つけることができます：divのマップが他のすべてが含まれてい http://www.tikey.de/neuseeland/vergleich.html

。内部では、mapとmap_profilesは互いに隣り合っており、map_profilesにはmap_hpとmap_spが含まれています。それは画面上で大丈夫だが、印刷すると完全に台無しになる。私は多くのCSSで遊んでみましたが、うまく動作しませんでした。

Answer 1

私はあなたのリンクに行ったときに1つのことに気付きました。私のブラウザのズームは120％でした。あなたが言ったことは、画像が重なっていてどこが厄介なのかが起こったのですが、私が100％ズームしたところ、うまくいきました。だから多分それは解像度/ズームの問題ですか？

Bootstrapを試してみて、それが機能するかどうか確認してください。