0

我有以下布局，其样式显示为写字台上的一张打印纸：

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

我希望能够在几个 div 之间拆分 div“内容”的内容，以便看起来内容实际上是在几张纸上分页的，每张纸的高度约为 1000 像素。

<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>

这样做有多可行？

4

2 回答 2

2

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

<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)
于 2012-12-17T08:03:17.710 回答
0

如上所述，您可以使用 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 张纸，间隔你如何想要它。

于 2012-12-17T06:49:35.547 回答