这是我的打印页面的样子，
这是我的 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 后分页
最佳答案
您应该封装您的 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: avoid;
- 为 divs 提供以像素为单位的特定宽度和高度
- 容器 应该有 display: inline-block 和 vertical-align: bottom;
- container-holders 应该有 display:block 属性
- [bonus] 避免内联样式
这是一个有效的 jsFiddle
我在 jsFiddle 之外尝试过，我得到了这个结果:
关于html - 使用 page-break-after 在 6 div 之后分页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17698026/