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

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

html css razor

Html 如何使用相对于父元素的绝对位置,html,css,razor,Html,Css,Razor,html报表包含的行的元素应打印在同一行中。设计时仅指定绝对左侧位置每一行都应该出现在前一行之后的下一行中，没有明确的top属性，如 row1 field1 row1 field2 row2 field1 row2 field2 根据和绝对位置是相对于父相对元素位置的因此，这必须起作用： <!DOCTYPE html> <html> <head> <

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

每一行都应该出现在前一行之后的下一行中，没有明确的top属性，如

   row1 field1                          row1 field2
              row2 field1    row2 field2

根据和绝对位置是相对于父相对元素位置的

因此，这必须起作用：

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

从屏幕顶部添加顶部属性可生成所需的布局：

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


第1行字段1
第1排第2栏
第2行字段1
第2排第2场

图元高度和浏览器渲染线高度可能不同。行与行之间应该有较大的空白淘汰。因此，很难按照html的要求计算poper top值

如何在不使用top属性的情况下获得所需的布局？每个row div元素应该在前一行元素之后的下一行开始，就像浏览器一样渲染块元素

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

您只需使用float:left on字段即可获得所需效果，而不必使用绝对值。您不需要设置顶部和左侧，而只需要在需要时设置宽度

尝试为每一行

赋予一个高度属性
.row {
    position: relative;
    height:1em;
}


未显式设置div时，其高度通常为零或空
.row {
    position: relative;
    height:1em;
}