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

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 s, которые будут помещаться на одной линии. Я мог бы просто иметь 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. Таким образом, пролеты будут выровнены в соответствии с относительной.