Question

我正在尝试从连接到网站的数据库中生成邮件列表标签（是的，我可以以某种文本格式获取列表并导入类似Word的内容......但最终我不会准备邮件，所以我想在这个过程中尽可能少的步骤！）。我设法让它工作除了一部分：标签没有正确垂直定位。

在过去的几个小时里，我看了很多关于SO的问题，但没有一个问题（或解决方案）与我所得到的完全匹配。

我为页面上的3个标签定义了3个不同的段落类别（我们用于打印的标签中存在奇怪的间隙），其尺寸基于标签位置和大小。每个标签都是一个带有3个类别之一的段落，标签库位于代表页面的div内（这些页面考虑了页面的顶部和底部边距）。

水平，它工作正常;垂直是另一回事。 Firebug显示段落重叠。我很难过发生了什么事。

这是CSS：

body
{
    color: Black;
    background-color: White;
    font-family: "Times New Roman", Times, serif;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
    background: white;
    position: absolute;
    width: 5.4cm;
    height: 1.43cm;
    max-height: 1.43cm;
    min-height: 1.43cm;
    margin-left: 0.5cm;
    margin-top: 1.48cm;
    margin-right: 0.5cm;
    margin-bottom: 0.5cm;
    padding: 0.5cm;
    top: 0;
    border: none;
    outline: solid 1px black;
}
p.print_label_left
{
    left: 0.65cm;
}
p.print_label_middle
{
    left: 7.3cm;
}
p.print_label_right
{
    left: 13.95cm;
}
div.print_page
{
    background: white;
    position: relative;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    width: 21cm;
    height: 29.7cm;
    border: none;
}

这是一个有代表性的HTML示例（由于隐私，我无法提供真实的内容）：

<body>
<div class="print_page" style="top:-1.33333333333cm;">
<p class="print_label_left" style="top:0cm;">A<br />
B<br />
C<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:0cm;">D<br />
E<br />
F<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:0cm;">G<br />
H<br />
I<br />
<br />
<br />
<br />
</p>
<p class="print_label_left" style="top:2.43cm;">J<br />
K<br />
L<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:2.43cm;">M<br />
N<br />
O<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:2.43cm;">P<br />
Q<br />
R<br />
<br />
<br />
<br />
</p>
</div>
</body>

标题定义了一个doctype（xhtml transitional 1.0），我玩了max-height和min-height，并在每个段落中添加额外的行以试图强制它有足够的内容来填写文本，但没有这样的运气。

当我打印出列表时，轮廓表示方框的间隔为2厘米而不是所需的2.43厘米。而且我很想找到要搜索的东西！

如果有帮助，我在Windows 7 x64计算机上使用Firefox 36，但我运行此服务器的服务器是典型的LAMP设置。

Answer 1

如果我理解你的问题，它应该有用吗？

＆＃13;

body
{
    color: Black;
    background-color: White;
    font-family: "Times New Roman", Times, serif;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
    background: white;
    width: 300px;
    height: 100px;
    margin-top: 10px;
    padding: 0.5px;
    top: 10px;
    border: none;
    outline: solid 1px black;
}
p.print_label_left
{
    margin-left: 10px;
}
p.print_label_middle
{
    margin-left: 150px;
}
p.print_label_right
{
    margin-left: 300px;
  
}
div.print_page
{
    background: white;
    padding: 0;
    margin: 5px;
    left: 0;
    top: 0;
    width: 500px;
    height: 100px;
    border: none;
    outline: solid 5px Red;
}

＆＃13;

<div class="print_page">
<p class="print_label_left">A<br />
B<br />
C<br />
</p>
<p class="print_label_middle">D<br />
E<br />
F<br />
</p>
<p class="print_label_right">G<br />
H<br />
I<br />
</p>
<p class="print_label_left">J<br />
K<br />
L<br />
</p>
<p class="print_label_middle">M<br />
N<br />
O<br />
</p>

＆＃13;

CSS绝对位置没有放在正确的位置

1 个答案: