为什么单击“打印”按钮时@media打印的选择器无法显示正确的格式？

Question

当我单击“打印”按钮时，文本应该显示在“打印”对话框的四列中，但是在我编写时显示为段落。

 This are my script code where there is click event of print button. when i click it print dialog popup but the text which it suppose to show in four column shows it as a paragraphs. <script> $(document).ready(function () { $(document.body).on('click', '#btnPrint', function () { window.print(); }); }); </script> 

 my css code. @media print { .FourColumnClass { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } 

 my html code. <div class="clsbtn"> <button type="button" id="btnPrint">Print</button> </div> <div class="FourColumnClass"> my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. my dog name is jonney. </div> 

Answer 1

添加media="print"在你的<link rel="stylesheet" type="text/css" href="mystyle.css" media="print">在HTML头