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

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属性的情况下获得所需的布局？每行div元素应该在前一行元素像浏览器正常渲染块元素之后开始下一行。

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

来源

2014-05-18 Andrus

尝试给每个.row一个height属性

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

http://jsfiddle.net/gTp2t/

的div通常当他们没有明确设置为零或零高度的效果。

来源

2014-05-19 00:16:30 KnightHawk

而不是使用绝对，你可以简单地使用float：left字段来获得所需的效果。如果需要，您不需要设置顶部和左侧的宽度。

来源

2014-05-18 21:22:27

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

回答

相关问题