Question

这是我的打印页面的样子，

enter image description here

这是我的html一瞥，

<style>
    .container{
        float: left; 
        border: 1px solid Black; 
        width: 400px;
        height: 350px;
        margin: 10px;
        padding: 10px;
        page-break-inside: avoid;
    }
    .container img{
        max-width: 200px;
        max-height: 200px;
    }
</style>
<div class="container">
    <b>Name: </b>@Product.Name<br />
    <b>Model: </b>@Product.ModelNumber<br />
    <img src="@Product.ImagePath" /><br />
    <span style="font-size: 20px">DetailedDescriptions</span><br />
    @foreach(var attr in Product.DetailedDescriptions){
        @attr.Header<br />
    }
    <span style="font-size: 20px">KeyAttributes</span><br />
    @foreach(var attr in Product.KeyAttributes){
        @attr.Name<br />
        @attr.Value<br />
    }
</div>

如何使用css

确保每6个div之后的分页符

Answer 1

您应该封装 divs ，并在 HTML 中创建更好的此类型结构：

<body>
    <div class="container-holder">
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
    </div>
    <div class="container-holder">
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <!-- keep adding more container-rows -->
    </div>
</body>

然后在 CSS 中考虑以下几点：

让正文占用整页
使用 page-break-inside：avoid;
以 divs
容器应该包含 display：inline-block 和 vertical-align：bottom;
容器持有者应该显示：阻止属性
[奖励]避免内联风格

这是一个有效的 jsFiddle

我在jsFiddle之外尝试过，我得到了这个结果：

print preview

Answer 2

您可以使用

div:nth-of-type(6n) {
    page-break-after:always;
}

在每个6. div之后插入一个分页符，但我认为这不适用于浮点数。

Answer 3

你可以这样做：

<强> FIDDLE

.wrapper div:nth-child(6n)
{
    margin-bottom: 300px;
}

这意味着：在每6个容器之后 - 添加x px的底部边距（你需要多少），以便将下一个框推到下一页。

使用page-break-after在6 div之后中断页面？

3 个答案: