位置：顯示器內絕對的：直列

我有這樣的設置：位置：顯示器內絕對的：直列

<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小號float:left，但我不喜歡這樣，因爲

的div S'包含的元素不會得到他們所調整
只打印1-2 div s到線當物理印刷

所以一個更好的主意似乎是在div s上使用display:inline。 img仍然排隊正確，但是，現在，包含的span s的絕對定位現在已經搞亂了 - 它們似乎相對於它們的底部而不是頂部（至少，這就是發生了什麼）在Firefox3.6上）。

發生了什麼事？我怎樣才能解決這個問題？

來源

2010-07-18 rampion

對於你上面的＃1，給包含的元素一個'overflow：auto'，讓它在浮動的大小時考慮浮動的div。 – 2010-07-18 12:21:55

嘗試使用display:inline-block，這會爲您提供兩個元素的特徵。

來源

2010-07-18 12:22:13 Sarfraz

真棒，謝謝！現在我只需要弄清楚如何說服我的打印機，它可以適合三個'div's到一條線......但你回答了我的問題。 A + – rampion 2010-07-18 12:34:57

@rampion：不客氣，謝謝:) – Sarfraz 2010-07-18 12:43:39

怎麼樣加入另一個相對定位div 裏面內聯定位div。這樣，跨度將根據相對值進行對齊。

來源

2010-07-18 12:22:55

位置：顯示器內絕對的：直列

回答

相關問題