Question

我正在尝试打印格式化为适合信纸的div。

在css中，我已将此页面展示为如下所示：

但是，当我打印时，我得到了这个

右侧的div不会打印在右侧，但是它们的轮廓就在那里。相反，其中包含的文本将被推送到下一页。

我不确定我哪里出错或发生了什么事。

这是我的代码：

我在“paperA4”div之外的风格：

    .paperA4 {
        width: 8.5in;
        height: 11in;
        border: 1px solid white;
        margin: auto;
        padding-left: .5in;
        padding-right: .5in;
        padding-top: .5in;
        padding-bottom: .5in;
    }

我的打印div内部：

<div id="print">

    <style>

    .paperA4 {
        width: 8.5in;
        height: 11in;
        border: 1px solid white;
        margin: auto;
        padding-left: .5in;
        padding-right: .5in;
        padding-top: .5in;
        padding-bottom: .5in;
    }

    .card-shell {
        width:100%;
        height:2in;
        border: 1px solid blue;
    }

    .in-card {
        width:50%;
        height:100%;
        border: 1px solid red;
        float: left;
    }
    </style>

    <div class="paperA4">

        <div class="card-shell">

            <div class="in-card">
                test
            </div>

            <div class="in-card">
                test
            </div>

        </div>

        <div class="card-shell">

            <div class="in-card">
                test
            </div>

            <div class="in-card">
                test
            </div>

        </div>

        <div class="card-shell">

            <div class="in-card">
                test
            </div>

            <div class="in-card">
                test
            </div>

        </div>

        <div class="card-shell">

            <div class="in-card">
                test
            </div>

            <div class="in-card">
                test
            </div>

        </div>

        <div class="card-shell">

            <div class="in-card">
                test
            </div>

            <div class="in-card">
                test
            </div>

        </div>

    </div>
</div>

我的打印功能：

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

Answer 1

你可以尝试添加display：flex;像这里：

.card-shell { width:100%; display:flex; height:2in; border: 1px solid blue; }

但请记住caniuse.com/#feat=flexbox

打印一个没有正确出来的div

1 个答案: