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

content_1、content_2のように各ページにIDを使用します。そして、次のような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回繰り返す（または必要な数の紙を使用する）か、1つの画像ファイルに3枚の紙を配置する必要があります。したい。

于 2012-12-17T06:49:35.547 に答える