Html CSS绝对位置未放在正确位置_Html_Css

Html CSS绝对位置未放在正确位置

html css

Html CSS绝对位置未放在正确位置,html,css,Html,Css,我正试图从连接到网站的数据库中生成邮件列表标签（是的，我可以获取一些文本格式的列表并导入到Word之类的东西中……但最终我不会准备邮件，所以我希望在这个过程中尽可能少的步骤！）。我已经设法让它工作，除了一个部分：标签没有正确地垂直放置在过去的几个小时里，我看了很多问题，但没有一个问题（或解决方案）与我的答案完全匹配我已经为整个页面的3个标签定义了3个不同的段落类（我们打印的标签中有wierd间隙），尺寸基于标签位置和大小。每个标签都是一个单独的段落，包含3个类别中的一个，标签组位于代表页面的

我正试图从连接到网站的数据库中生成邮件列表标签（是的，我可以获取一些文本格式的列表并导入到Word之类的东西中……但最终我不会准备邮件，所以我希望在这个过程中尽可能少的步骤！）。我已经设法让它工作，除了一个部分：标签没有正确地垂直放置

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

我已经为整个页面的3个标签定义了3个不同的段落类（我们打印的标签中有wierd间隙），尺寸基于标签位置和大小。每个标签都是一个单独的段落，包含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示例（由于隐私问题，我无法提供真实的内容）：


A

B

C








D

E

F








G

H

我








J

K

L








M

N

O








p

Q

R

页眉定义了一个doctype（xhtml transitional 1.0），我使用了max height和min height，并在每个段落中添加了额外的行，试图迫使它有足够的内容来填充文本，但没有这样的运气

当我打印列表时，轮廓显示框的间距为2cm，而不是要求的2.43cm。而且我对要寻找的东西已经没有什么想法了

如果有帮助的话，我在Windows7x64机器上使用Firefox36，但是我运行这个的服务器是典型的LAMP设置。

如果我理解你的问题，它应该可以工作吗

正文
{
颜色：黑色；
背景色：白色；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
身高：100%；
保证金：0；
填充：0；
字号：11pt；
}
p、 打印标签左，打印标签右，打印标签中
{
背景：白色；
宽度：300px；
高度：100px；
边缘顶部：10px；
填充：0.5px；
顶部：10px；
边界：无；
外形：实心1px黑色；
}
p、 打印\u标签\u左
{
左边距：10px；
}
p、 打印\u标签\u中间
{
左边距：150像素；
}
p、 打印\u标签\u右
{
左边距：300px；
}
分区打印页面
{
背景：白色；
填充：0；
保证金：5px；
左：0；
排名：0；
宽度：500px；
高度：100px；
边界：无；
轮廓：实心5px红色；
}


A

B

C


D

E

F


G

H

我


J

K

L


M

N

O

提供密码笔会让人们更容易看到问题所在：此外，通常不建议cm使用屏幕：@grill，这是用于打印，而不是用于屏幕（我假设提到邮件列表标签可能会让这一点变得显而易见，但没有明确说明……）。不同的浏览器/打印机组合呈现px的方式不同，但无论如何cm都是一致的。这很重要，因为我不一定是要打印这些内容的人。@grill，fwiw，这里有一个jsfiddle:。这并没有帮助，因为输出显示并没有真正显示问题。。。除此之外，第一排盒子的大小与第二排盒子的大小相同，但这并不是因为第二排盒子的位置太高。请欣赏这一尝试，@Milad，但事实并非如此（这与我一开始所说的非常相似：-/）。每一组3个段落都要在整个页面上对齐，下一行在下面横排成一行；这就是为什么我有这个位置：绝对（ftr，我也尝试过浮动：左，根本没有成功）。它必须以cm为单位，因为我使用不同浏览器/打印机组合的经验意味着使用px时，结果不能在所有情况下正确打印。

<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>