0

標準の 3.5 インチ x 2 インチの名刺フォーマットに適合する製品タグを生成するために使用したい html ファイルがあります。

3 つの既製の画像を背景として使用して、3 つの div を特定のサイズに塗りつぶします。 http://www.orcasoul.com/images/bowls/fullpage.jpgは 8.5" x 11" で、紙のサイズです。 http://www.orcasoul.com/images/bowls/pagebox.jpgは 7" x 10" で、カードを保持する紙の領域のサイズです。 http://www.orcasoul.com/images/bowls/cardbox.jpgは 3.5 インチ x 2 インチで、個々のカードのサイズです。

各ページ画像の div のスタイルと、カードボックスの 2 つの div (左と右) があります。

スタイルコード:

        <style>
        html, body {height:100%;}
        div.fullpage
        {
            position:relative;
            width:8.5in;
            height:11in;
            background-image:url("http://www.orcasoul.com/scw/fullpage.jpg");
            background-position:center center;
            background-repeat:no-repeat;
        }
        div.pagecard
        {
            position:relative;
            top:0px;
            width:7in;
            height:10in;
            margin-left:0.75in;
            margin-right:0.75in;
            margin-top:0.5in;
            margin-bottom:0.5in;
            background-image:url("http://www.orcasoul.com/scw/pagebox.jpg");
            background-position:center center;
            background-repeat:no-repeat;
        }

        div.card-block-left
        {
            position:relative;
            float:left;
            width:3.5in;
            height:2in;
            background-image:url("http://www.orcasoul.com/scw/cardBox.jpg");
            background-repeat:no-repeat;
        }
        div.card-block-right
        {
            position:relative;
            float:left;
            width:3.5in;
            height:2in;
            background-image:url("http://www.orcasoul.com/scw/cardBox.jpg");
            background-repeat:no-repeat;
        }
        p.single_record
        {
            page-break-after: always
        }
    </style>

私は次のコードを持っています：

    <body>
    <div class="fullpage">
        <div class="pagecard">
            <div class="card-block-left">
                <img class="image-bowl" src="http://www.orcasoul.com/scw/MyrtleTiBurl07-005.jpg" />
                <div class="info-box">
                    <p>10½" Tiger Myrtle Burl Bowl</p>
                    <p>MyrtleTiBurl07-005</p>
                    <p class="text-index">Product #337</p>
                </div>
                <div class="price-box">
                    <p>$120</p>
                </div>
                <div class="link-box"> 
                    <p>http://www.splinterscraftworks.us/</p>
                </div>
                <img class="logo" src="BowlPhotos/SCW_Logo.jpg" />
            </div>
            <div class="card-block-right">
                <img class="image-bowl" src="http://www.orcasoul.com/scw/MyrtleTiBurl07-005.jpg" />
                <div class="info-box">
                    <p>10½" Tiger Myrtle Burl Bowl</p>
                    <p>MyrtleTiBurl07-005</p>
                    <p class="text-index">Product #337</p>
                </div>
                <div class="price-box">
                    <p>$120</p>
                </div>
                <div class="link-box"> 
                    <p>http://www.splinterscraftworks.us/</p>
                </div>
                <img class="logo" src="BowlPhotos/SCW_Logo.jpg" />
            </div>
        </div>
        <p class="single_record"></p>
    <div>
</body>

実際のコードは、すべてが適切に並んでいるかどうかを確認するために、9 ページのコードを繰り返します...

そうではありません。

カードの最初のページ (全部で 10 枚) と同様に、左から右への配置は完璧です。

しかし、1 ページほど経つと、ページが下にずれて、最後のページが次のページに流れ込むように見えます。

の

次のページの先頭に移動することになっています。

HTML をhttp://www.orcasoul.com/images/bowls/testtags.htmlにアップロードしました

これで正確なページが表示されるはずですが、そうでないのはなぜですか?

4

1 に答える 1

0

最初のページには10枚のカードが含まれています。これはレイアウトに問題ありませんが、次のページには2枚のカードしか含まれていません。ページdivの高さが10インチ固定されていると、大きな空白ができます。

于 2012-11-10T06:29:20.060 に答える