html 报告包含其元素应打印在同一行的行。 在设计时仅指定绝对左侧位置。
每一行都应该出现在上一行之后的下一行，没有像这样的显式 top 属性
row1 field1 row1 field2
row2 field1 row2 field2
根据 http://www.tutorialspoint.com/css/css_paged_media.htm和 Absolute positioning and its parent element 绝对位置来自父元素的相对位置。
所以这一定有效:
<!DOCTYPE html>
<html>
<head>
<style>
.row {
position: relative;
}
.field {
position: absolute;
}
</style>
</head>
<body>
<div class='row'>
<div class='field' style='left:5cm'>row1 field1</div>
<div class='field' style='left:16cm'>row1 field2</div>
</div>
<div class='row'>
<div class='field' style='left:8cm'>row2 field1</div>
<div class='field' style='left:12cm'>row2 field2</div>
</div>
</body>
</html>
不幸的是，由于未知原因，它不起作用。所有元素出现在同一行:
row1 field1 row2 field1 row2 field2 row1 field2
从屏幕顶部添加顶部属性会生成所需的布局:
<div class='row'>
<div class='field' style='top:1cm;left:5cm'>row1 field1</div>
<div class='field' style='top:1cm;left:16cm'>row1 field2</div>
</div>
<div class='row'>
<div class='field' style='top:2cm;left:8cm'>row2 field1</div>
<div class='field' style='top:2cm;left:12cm'>row2 field2</div>
</div>
元素高度和浏览器呈现的行高可能会有所不同。行之间的大空白应该 淘汰。因此很难按照此 html 的要求计算 poper top 值。
如何在不使用 top 属性的情况下获得所需的布局？ 每行 div 元素应该像浏览器一样从上一行元素之后的下一行开始 渲染 block 元素。
如果有帮助，我可以使用表格或其他广泛实现的元素来代替 div。此报告是在运行时从 ASP.NET MVC4 应用程序生成的 Razor View ，并使用 RazorEngine 运行 go get html，在桌面现代浏览器中呈现。
最佳答案
尝试给每个 .row 一个 height 属性
.row {
position: relative;
height:1em;
}
div 在未明确设置时通常具有零或空高度效果。
关于html - 如何使用相对于父元素的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23725847/