position：显示内的绝对值：inline

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中的每一个都位于div（position:relative}内，位于img内，因此div得到了img大小与div的大小相同。

我希望显示尽可能多的div s以适合单行。我可以拥有float:left s div，但我不喜欢这样，因为

• div s'包含的元素不会被它们调整大小
• 它仅在物理打印时将1-2 display:inline打印到一行

因此，更好的想法似乎是在div上使用img。 span仍然正确排列，但现在，包含的div s的绝对定位现在搞砸了 - 它们似乎相对于其包含{{1}}的底部定位，而不是顶部（至少，这是在Firefox3.6上发生的事情）。

发生了什么事？我怎么能绕过这个？

Answer 1

尝试使用display:inline-block，这将为您提供元素的两个特征。

Answer 2

如何在内联定位div中添加另一个相对定位div 。这样，跨度将根据相对的对齐。