Question

我将以下布局设计为在写字台上显示为一张打印纸张：

<div class="paper">
    <div class="header">
        [stuff]
    </div>
    <div class="content">
        [long stuff]
    </div>
    <div class="footer">
        [stuff]
    </div>
</div>

我希望能够在几个div之间拆分div“content”的内容，以便看起来内容实际上是在几张纸上分页，每张纸都是~1000px高。

<div class="paper">
    <div class="header">
        [stuff]
    </div>
    <div class="content">
        [part 1 of long stuff]
    </div>
</div>
<div class="paper">
    <div class="content">
        [part 2 of long stuff]
    </div>
</div>
<div class="paper">
    <div class="content">
        [part 3 of long stuff]
    </div>
    <div class="footer">
        [stuff]
    </div>
</div>

这样做有多可行？

Answer 1

如果是这种情况，可行选项可能是跟踪div的高度，同时附加HTML中的数据。

<div class="content" id="content_1">

为每个页面使用ID，例如content_1，content_2。并使用jquery，如：

$("#content_1").append("some text"); 
if($("#content_1").height() >= 1000) {
    $("#content_1").parent().append('<div class="content" id="content_2"></div>');
}

在像

这样的循环中执行此操作

index = 0;
$("#content_" + index)

Answer 2

如上所述，您可以使用CSS3列属性。这是一个快速而肮脏的jsFiddle，可以帮助您入门，代码如下：

<强> CSS

.content {
    -moz-column-count: 3; 
    -moz-column-width: 100px; 
    -webkit-column-width: 100px;
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    height: 1000px;
    margin: 25px;
}

<强> HTML

<div class="header">
    <strong>HEADER STUFF</strong>
</div>

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id libero est. Integer porttitor consectetur adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id ipsum non tortor dapibus imperdiet quis in lacus. Aliquam erat volutpat. Pellentesque malesuada arcu at magna suscipit condimentum. Integer congue pretium nunc at pretium. Vestibulum vel turpis in turpis gravida pretium. 
</div>

<div class="footer">
<strong>FOOTER STUFF</strong>
</div>

然后你必须得到纸张的背景图像（假设你正在使用的是）重复3次（或者你想要多少张纸）或者在一个图像文件中只有3张纸，你想要它的间隔。

根据长度在div之间拆分内容

2 个答案: