是否有相当于page-break-after属性

时间:2014-09-10 13:17:05

标签: html css

我知道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))之后我需要一个分页符,但我无法弄清楚如何添加它。有没有办法实现它(不添加新元素)?

1 个答案:

答案 0 :(得分:3)

假设您无法更改DOM(我建议),您可以使用浮动并清除它来修复它:

.c1 > div { float: left; margin-right: 10px; }
.c1 > div:nth-of-type(3n+1) { clear: left; }

所以你是浮动div,但是拒绝第4个在左边有一个元素,从而强迫它在另一条线上。

<强> Fiddle example