Question

我正在做一个项目，我为应用程序的所有用户生成动态传递。

我已经设置了一个打印样式表，其中包含在不同页面上生成的传递的正面和背面。我现在遇到的问题是，我似乎无法对齐通道的正面和背面，因此它会将它们打印在彼此的顶部。

的CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

    * {
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print_card {
        width: 297px;
        height: 180px;
        background: url('../../../web/bundles/digitalartlab/images/pattern.jpg') #222222;
        background-size: 100% auto ;
        page-break-after: always;
        font-family: "open sans";
    }
    canvas{
        background: #fff;
        padding: 5px;
    }
    .qrcode{
        padding: 10px;
        float: left;
    }
    h1.undertitle{
        margin-top: 5px;
    }
    .user {
        font-size: 14px;
        float: left;
        color: #fff;
        margin-left: 10px;
        margin-top: 15px;
        max-width: 142px;
    }
    h1{font-size:14px}

    .underline{
        width: 100%;
        float: left;
    }

    .url, .date{
        color: #fff;
        width: 50%;
        margin-top: 25px;
        float: left;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 12px;
    }

    .date{
        float: right;
        padding-right: 20px;
        text-align: right;
    }

    .print_card.back{
        background: url('../../../web/bundles/digitalartlab/images/print_back.jpg') #222222;
    }

/*@page {
    size: 297px 230px;
}*/

生成的html示例：

<body>
    <div class="print_card">
        <div class="qrcode" value="http://localhost:1337/digitalartlab/web/profile/Karel/checkin"></div>
        <div class="user">
            <h1>Gebruikersnaam:</h1>
            <hr>
            Karel
            <h1 class="undertitle">Volledige naam:</h1>
            <hr>
            Karel Kores
        </div>
        <div class="underline"><p class="url">www.weburl.nl</p><p class="date">Datum: 01-12-2015</p></div>
    </div>
    <div class="print_card back"></div>
    <script src="/digitalartlab/web/js/44a923e.js"></script>
</body>

qrcode变成95x95px的方格。

关于如何对齐正面和背面的任何想法？

感谢，儒略

双面打印上的CSS对齐

0 个答案: