Question

html报告包含其元素应打印在同一行中的行。在设计时仅指定绝对左侧位置。

每一行都应出现在上一行之后的下一行，而没有像

这样的显式顶级属性

   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元素应该在浏览器之前的前一行元素之后的下一行开始渲染块元素。

如果这有助于代替div，我可以使用表或其他广泛实现的元素。此报告是在运行时从ASP.NET MVC4应用程序生成的Razor视图，使用RazorEngine运行go get html，它在桌面现代浏览器中呈现。

Answer 1

您可以简单地使用float：left在字段上获得所需的效果，而不是使用绝对值。只有在需要时，您才需要设置顶部和左侧而不是宽度。

Answer 2

尝试为每个.row提供height属性

.row {
    position: relative;
    height:1em;
}

http://jsfiddle.net/gTp2t/

div未明确设置时通常具有零或零高度效果。

如何使用相对于父元素的绝对位置

2 个答案: