使用page-break-after在6个div后打破页面？答案

【问题标题】：Break Page after 6 div using page-break-after?使用page-break-after在6个div后打破页面？
【发布时间】：2013-07-17 20:17:45
【问题描述】：

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

这是我的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 后分页符

【问题讨论】：

标签： html css

【解决方案1】：

您应该封装您的 div 并在 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：避免；
为 divs 指定特定的宽度和高度（以像素为单位）
容器应该有 display: inline-block 和 vertical-align: bottom;
container-holders 应该有 display:block 属性
[奖励] 避免使用内联样式

这是一个有效的jsFiddle

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

【讨论】：

如果这对您有用，请将此回复标记为已回答
好的，谢谢，我会检查

【解决方案2】：

你可以使用

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

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

【讨论】：

【解决方案3】：

你可以这样做：

FIDDLE

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

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

【讨论】：

这看起来不错。但我更喜欢page-break-XXX。使其适用于任何维度。
在您的问题中，您的容器的高度是固定的 - 所以这应该适合您:)
好的，谢谢，我会检查
删除浮动是有效的，但我需要将元素浮动到左边，以便我可以在行中放置尽可能多的元素。有办法吗？
尝试显示：inline-block而不是float