встроенный блок портится с относительным позиционированием - PullRequest
Новая
       6

встроенный блок портится с относительным позиционированием

3 голосов
/ 17 января 2010

У меня есть следующий код: 

    <HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">

<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">

<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>

<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>

</div>

</BODY>
</HTML>

Второй div не размещается в позиции 32 x, если я не удалю свойство display: inline-block, которое мне нужно. Есть ли способ обойти это?

Редактировать: кажется, что работает, если я уберу display: inline-block, но тогда полосы прокрутки появятся горизонтально (так как div занимает некоторое невидимое пространство).

Ответы [ 2 ]

1 голос
/ 17 января 2010

Вы должны использовать способ отображения position:absolute элементов, когда они внутри position:relative.
Кроме того, чтобы избежать горизонтальной полосы прокрутки, используйте overflow-y.

Рабочий пример: http://jsbin.com/uveni3

0 голосов
/ 12 сентября 2011

При использовании свойств «inline-block» вы всегда должны начинать открывающий тег HTML в формате DTD. размещение там должно решить эту проблему.

...