我有一个 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
这应该给我确切的页面 - 为什么不呢？