부모 요소에 상대적인 절대 위치 사용 방법

html 보고서에는 요소가 같은 줄에 인쇄되어야하는 행이 들어 있습니다. 절대 왼쪽 위치 만 디자인 타임에 지정됩니다.부모 요소에 상대적인 절대 위치 사용 방법

각 행과 http://www.tutorialspoint.com/css/css_paged_media.htm Absolute positioning and its parent element 절대 위치 부모 요소 상대 위치 내지 따르면

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>

불행하게도, 그것은 알 수없는 이유로 작동하지 않습니다.

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을 사용하여 실행됩니다.

출처

2014-05-18 Andrus

시도는 일반적으로 그들은 명시 적으로 설정하지 제로 또는 null 높이 효과가 있습니다.

출처

2014-05-19 00:16:30 KnightHawk

절대 값을 사용하는 대신 필드에 float : left를 사용하여 원하는 효과를 얻을 수 있습니다. 필요한 경우에만 너비 대신 상단 및 왼쪽을 설정할 필요가 없습니다. 각 .rowheight 속성을

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

http://jsfiddle.net/gTp2t/

된 div를 제공

출처

2014-05-18 21:22:27

부모 요소에 상대적인 절대 위치 사용 방법

답변

관련 문제