我知道page-break-after用于打印html文档,但有一个浏览器等效吗? 就像我有这个HTML:
<div class="c1">
<div>item1</div>
<div>value11</div>
<div>value12</div>
<div>item2</div>
<div>value21</div>
<div>value22</div>
</div>
我希望看到类似
的内容item1 value11 value12
item2 value21 value22
css:
.c1 > div{
display:inline-block
}
.c1 > div:nth-child(3n){
????page-break-after
}
每隔三个div(:nth-child(3n))之后我需要一个分页符,但我无法弄清楚如何添加它。有没有办法实现它(不添加新元素)?
答案 0 :(得分:3)
假设您无法更改DOM(我建议),您可以使用浮动并清除它来修复它:
.c1 > div { float: left; margin-right: 10px; }
.c1 > div:nth-of-type(3n+1) { clear: left; }
所以你是浮动div,但是拒绝第4个在左边有一个元素,从而强迫它在另一条线上。
<强> Fiddle example 强>