当我点击打印按钮时@media print的选择器没有显示正确的格式?

时间:2015-03-08 10:34:53

标签: javascript jquery html css

当我点击打印按钮时,文本假设在打印对话框的四列中显示,但它显示为我写的段落。



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>
&#13;
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;
    }

}
&#13;
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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

在html主管上的media="print"添加<link rel="stylesheet" type="text/css" href="mystyle.css" media="print">