позиция: абсолютная на дисплее: встроенная

Question

У меня есть такая установка:

<div class="item">
  <img src="..."/>
  <span class="item-detail"></span>
  <span class="item-detail"></span>
  <!-- ... -->      
  <span class="item-detail"></span>
</div>
<div class="item"><!-- ... --></div>
<div class="item"><!-- ... --></div>
<!-- ... -->
<div class="item"><!-- ... --></div>

Каждый из span s расположен абсолютно в пределах их div (который имеет position:relative), лежа в пределах img, поэтомуdiv получает свой размер от размера img.

. Я хочу отобразить столько div, сколько уместится в одной строке.Я мог бы просто иметь div s float:left, но мне это не нравится, потому что

• содержащий div s 'элемент не изменяет их размер
• при физической печати он печатает только 1-2 div с в строку

Так что лучше было бы использовать display:inline на div с.img s по-прежнему выстраиваются корректно, однако теперь абсолютное позиционирование для содержащихся span s теперь испорчено - они кажутся расположенными относительно основания их содержащего div, а не сверху (по крайней мере, это то, что происходит в Firefox3.6).

Что происходит?Как я могу обойти это?

Answer 1

Попробуйте использовать display:inline-block, это даст вам обе характеристики для вашего элемента.

Answer 2

А как насчет добавления другого относительного позиционного div внутри встроенного позиционного div.Таким образом, пролеты будут выровнены в соответствии с относительным.