Question

我有一个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

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

Answer 1

您的第一页包含10张卡，您的布局可以使用，但下一页只包含2张卡。你的页面div上有10英寸的固定高度，你可以获得那么大的空白区域。

CSS无法正常翻页

1 个答案: