0

我有一个 html 文件，我想用它来生成一些适合标准 3.5" x 2" 名片格式的产品标签。

它使用 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 页）也是如此。

但是在一页左右之后，页面上似乎有一个向下漂移，最后一页渗入下一个页面。

这

应该转到下一页的顶部。

我已将 HTML 上传到http://www.orcasoul.com/images/bowls/testtags.html

这应该给我确切的页面 - 为什么不呢？

4

1 回答 1

0

您的第一页包含 10 张卡片，这适合您的布局，但接下来的页面仅包含 2 张卡片。在页面 div 上使用 10 英寸的固定高度，您可以获得很大的空白空间。

于 2012-11-10T06:29:20.060 回答