分页符不起作用

时间：2018-03-10 11:20:01

标签： html css

我有一些html页面，我正在尝试应用page-break，但无效。

<body>
    <div class="page">
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->

        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
    </div><!-- /page -->
    <div class="page">
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->

        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
    </div><!-- /page -->      
</body>

除了bootstrap默认CSS之外，上面文件的CSS是

.page {
    page-break-after: always !important;;
}
.v2018-container { position:relative; }

page-break-always根本不起作用。

这是实际页面的片段，无效。

＆＃13;
＆＃13; 
.v2017-container, .v2018-container { position:relative; }
.icard {
        position: relative;
        height:3.465in;
        width:2.244in;
        overflow: hidden;
}
  
.printer-normal .student.v2018.back {
        transform: rotate(180deg);
    }

    .student.v2018 .photo {
        margin-top:120px;
    }

    .student.v2018 .photo img {
        border: 4px solid #fff;
    }

    .student.v2018 .f-name {
        color: #1a9e7f !important;
    }

    .v2018 .bg-warning {
        background-color: #f8d053 !important;
    }

    .v2018 .bg-danger {
        background-color: #f55753 !important;
    }

@media print {
    .page {
        page-break-after: always !important;
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="page">
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            <div class="clearfix init">
                <div class="text-center photo">
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div>
                <div class="m-l-20 m-r-20">
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase">
                        Mohammad Raafid                    </div>
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18">
                        6468                    </div>
                </div>
                <div class="clearfix">
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase">
                        LKG A                    </div>
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase">
                            86                        </div>
                                    </div>
            </div><!--/ clearfix -->
        </div><!-- /front -->

        <div class="icard student  v2018 back">
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30">
                <div class="clearfix fs-12 m-t-30 row">
                    <div class="col-xs-3">
                        <div class="f-name lh-12">SID</div>
                        <div class="f-value uppercase bold">6468</div>
                    </div>
                    <div class="col-xs-4 text-center">
                        <div class="f-name lh-12">HOUSE</div>
                        <div class="f-value uppercase bold">Chinar</div>
                    </div>
                    <div class="col-xs-5 text-right">
                        <div class="f-name lh-12">ADM NO</div>
                        <div class="f-value uppercase bold">04/16</div>
                    </div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Name</div>
                    <div class="f-value uppercase bold">Mohammad Raafid</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Parentage</div>
                    <div class="f-value uppercase bold">Maajid Mushtaq Khan</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Contact(s)</div>
                    <div class="f-value uppercase bold">9797725650, 9596046000</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Address</div>
                    <div class="f-value uppercase bold lh-12 ">Wazirbagh, Jawahir Nagar, Srinagar</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Blood Group</div>
                    <div class="f-value uppercase bold lh-12">AB +ve</div>
                </div>
                <div class="clearfix m-t-10 fs-10">
                    <div class="f-group pull-left">
                        <div class="f-name lh-10 uppercase">Date of Issue</div>
                        <div class="f-value uppercase">10-03-2018</div>
                    </div>
                    <div class="f-group pull-right text-right">
                        <div class="f-name lh-10 uppercase">Bus Details</div>
                        <div class="f-value uppercase">
                                                            86 - Jawaharnagar                                                    </div>
                    </div>
                </div>
            </div>
        </div><!-- /back -->
    </div><!-- /clearfix -->

    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            <div class="clearfix init">
                <div class="text-center photo">
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div>
                <div class="m-l-20 m-r-20">
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase">
                        Dayyan Murtaza Mattoo                    </div>
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18">
                        6480                    </div>
                </div>
                <div class="clearfix">
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase">
                        LKG A                    </div>
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase">
                            62                        </div>
                                    </div>
            </div><!--/ clearfix -->
        </div><!-- /front -->

        <div class="icard student  v2018 back">
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30">
                <div class="clearfix fs-12 m-t-30 row">
                    <div class="col-xs-3">
                        <div class="f-name lh-12">SID</div>
                        <div class="f-value uppercase bold">6480</div>
                    </div>
                    <div class="col-xs-4 text-center">
                        <div class="f-name lh-12">HOUSE</div>
                        <div class="f-value uppercase bold">Chinar</div>
                    </div>
                    <div class="col-xs-5 text-right">
                        <div class="f-name lh-12">ADM NO</div>
                        <div class="f-value uppercase bold">16/16</div>
                    </div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Name</div>
                    <div class="f-value uppercase bold">Dayyan Murtaza Mattoo</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Parentage</div>
                    <div class="f-value uppercase bold">Late Irfan Majid Mattoo</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Contact(s)</div>
                    <div class="f-value uppercase bold">9906906751</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Address</div>
                    <div class="f-value uppercase bold lh-12 ">BulBul Bagh, Barzulla Srinagar</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Blood Group</div>
                    <div class="f-value uppercase bold lh-12">O +ve</div>
                </div>
                <div class="clearfix m-t-10 fs-10">
                    <div class="f-group pull-left">
                        <div class="f-name lh-10 uppercase">Date of Issue</div>
                        <div class="f-value uppercase">10-03-2018</div>
                    </div>
                    <div class="f-group pull-right text-right">
                        <div class="f-name lh-10 uppercase">Bus Details</div>
                        <div class="f-value uppercase">
                                                            62 - Barzulla                                                    </div>
                    </div>
                </div>
            </div>
        </div><!-- /back -->
    </div><!-- /clearfix -->
</div>
<div class="page">
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            <div class="clearfix init">
                <div class="text-center photo">
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div>
                <div class="m-l-20 m-r-20">
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase">
                        TASFIYAH ZAHOOR                    </div>
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18">
                        6521                    </div>
                </div>
                <div class="clearfix">
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase">
                        LKG A                    </div>
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase">
                            53                        </div>
                                    </div>
            </div><!--/ clearfix -->
        </div><!-- /front -->

        <div class="icard student  v2018 back">
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30">
                <div class="clearfix fs-12 m-t-30 row">
                    <div class="col-xs-3">
                        <div class="f-name lh-12">SID</div>
                        <div class="f-value uppercase bold">6521</div>
                    </div>
                    <div class="col-xs-4 text-center">
                        <div class="f-name lh-12">HOUSE</div>
                        <div class="f-value uppercase bold">Chinar</div>
                    </div>
                    <div class="col-xs-5 text-right">
                        <div class="f-name lh-12">ADM NO</div>
                        <div class="f-value uppercase bold">57/16</div>
                    </div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Name</div>
                    <div class="f-value uppercase bold">TASFIYAH ZAHOOR</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Parentage</div>
                    <div class="f-value uppercase bold">Dr. Zahoor Ahmad Parry</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Contact(s)</div>
                    <div class="f-value uppercase bold">9906593222, 9018069559</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Address</div>
                    <div class="f-value uppercase bold lh-12 ">Quarter No. E1, IIIM Colony, LD Colony-Sanatnagar Srinagar</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Blood Group</div>
                    <div class="f-value uppercase bold lh-12">AB +ve</div>
                </div>
                <div class="clearfix m-t-10 fs-10">
                    <div class="f-group pull-left">
                        <div class="f-name lh-10 uppercase">Date of Issue</div>
                        <div class="f-value uppercase">10-03-2018</div>
                    </div>
                    <div class="f-group pull-right text-right">
                        <div class="f-name lh-10 uppercase">Bus Details</div>
                        <div class="f-value uppercase">
                                                            53 - Sanatnagar                                                    </div>
                    </div>
                </div>
            </div>
        </div><!-- /back -->
    </div><!-- /clearfix -->

    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            <div class="clearfix init">
                <div class="text-center photo">
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div>
                <div class="m-l-20 m-r-20">
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase">
                        Arshman Hussain Lone                    </div>
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18">
                        6524                    </div>
                </div>
                <div class="clearfix">
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase">
                        LKG A                    </div>
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase">
                            77                        </div>
                                    </div>
            </div><!--/ clearfix -->
        </div><!-- /front -->

        <div class="icard student  v2018 back">
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30">
                <div class="clearfix fs-12 m-t-30 row">
                    <div class="col-xs-3">
                        <div class="f-name lh-12">SID</div>
                        <div class="f-value uppercase bold">6524</div>
                    </div>
                    <div class="col-xs-4 text-center">
                        <div class="f-name lh-12">HOUSE</div>
                        <div class="f-value uppercase bold">Deodar</div>
                    </div>
                    <div class="col-xs-5 text-right">
                        <div class="f-name lh-12">ADM NO</div>
                        <div class="f-value uppercase bold">60/16</div>
                    </div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Name</div>
                    <div class="f-value uppercase bold">Arshman Hussain Lone</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Parentage</div>
                    <div class="f-value uppercase bold">Arshed Hussain Lone</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Contact(s)</div>
                    <div class="f-value uppercase bold">9797113997, 9622424281</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Address</div>
                    <div class="f-value uppercase bold lh-12 ">H No. 1 Hussain Villa Bonamsar Sonwar Srinagar</div>
                </div>
                <div class="m-t-5 fs-12">
                    <div class="f-name lh-12 uppercase">Blood Group</div>
                    <div class="f-value uppercase bold lh-12">A +ve</div>
                </div>
                <div class="clearfix m-t-10 fs-10">
                    <div class="f-group pull-left">
                        <div class="f-name lh-10 uppercase">Date of Issue</div>
                        <div class="f-value uppercase">10-03-2018</div>
                    </div>
                    <div class="f-group pull-right text-right">
                        <div class="f-name lh-10 uppercase">Bus Details</div>
                        <div class="f-value uppercase">
                                                            77 - Sonwar                                                    </div>
                    </div>
                </div>
            </div>
        </div><!-- /back -->
    </div><!-- /clearfix -->
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

试试这个

 <style type="text/css">
    @media print {
        .page {
            page-break-after: always !important;;
        }
    }
    .v2018-container { position:relative; }     
</style>
 <div class="page">
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            hello
        </div><!-- /front -->
        <div class="icard student  v2018 back">
            hello
        </div><!-- /back -->
    </div><!-- /clearfix -->

    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            hello
        </div><!-- /front -->
        <div class="icard student  v2018 back">
            hello
        </div><!-- /back -->
    </div><!-- /clearfix -->
</div><!-- /page -->
<div class="page">
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            hello
        </div><!-- /front -->
        <div class="icard student  v2018 back">
            hello
        </div><!-- /back -->
    </div><!-- /clearfix -->

    <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
        <div class="icard student m-b-20 v2018 front">
            hello
        </div><!-- /front -->
        <div class="icard student  v2018 back">
            hello
        </div><!-- /back -->
    </div><!-- /clearfix -->
</div><!-- /page -->
<script>window.onload = function() { window.print(); }</script>

相关问题
最新问题