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

I am attempting to print a div that is formatted to fit on a letter sheet of paper.

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

In css, I have laid out this page to look like the following:

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

But, when I print, I get this

但是，当我打印时，我明白了

The div's on the right side are not printed on the right, but their outlines are there. Instead the text contained inside them is pushed to the next page.

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

I'm not really sure where I went wrong or what is happening.

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

Here is my code:

这是我的代码：

my style outside the "paperA4" 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;
    }

Inside of my print div:

在我的印刷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>

My printing function:

我的打印功能：

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;
}

1 个解决方案

#1

you can try adding display:flex; like here:

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

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

but keep in mind caniuse.com/#feat=flexbox

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

#1