Как использовать абсолютное положение относительно родительского элемента

html report содержит строки, элементы которых должны быть напечатаны в одной строке. Только абсолютные левые позиции указываются во время разработки.Как использовать абсолютное положение относительно родительского элемента

Каждая строка должна появиться в следующей строке после предыдущей строки без явного атрибута верхнего уровня, как

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.

Как получить желаемый макет без использования верхнего атрибута? Каждый элемент div строки должен начинаться в следующей строке после предыдущего элемента строки, такого как браузер, обычно отображает элементы блока.

Я могу использовать таблицы или другие широко используемые элементы, если это помогает вместо div. Этот отчет представляет собой представление Razor, сгенерированное во время выполнения из приложения ASP.NET MVC4, и запускается с использованием RazorEngine go get html, который отображается в современном браузере рабочего стола.

источник

2014-05-18 Andrus

Try давая каждому атрибуту .rowheight

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

http://jsfiddle.net/gTp2t/

дивы, как правило, имеют эффект нулевой высоты или нуль, если они не заданы явным образом.

источник

2014-05-19 00:16:30 KnightHawk

Вместо использования абсолютного значения вы можете просто использовать float: left on fields, чтобы получить желаемый эффект. Вам не нужно будет устанавливать верхнюю и левую слишком ширину, только если это необходимо.

источник

2014-05-18 21:22:27

Как использовать абсолютное положение относительно родительского элемента

ответ

Смежные вопросы