定位相鄰元素

Question

我想達到以下效果：

+----------------------+-----------------------------------+-----------------------+ 
| span (absolute left) | div consuming all space inbetween | span (absolute right) | 
+----------------------+-----------------------------------+-----------------------+ 

從表面上感覺很簡單;然而：

• 我不想設置左/右元素的寬度（我希望他們'自動收縮'）;和
• 我不想設置全部使用div的寬度（我希望它填充任意空間）。

我一直在擺弄相對定位並浮動一段時間，並開始覺得我失去了一些明顯的東西，因爲我太親近了。我很感激地把我的痛苦:)的

（使用表剛剛發生，我 - 我有另一個小提琴同時。）

謝謝:)

Answer 1

謝謝bPratik！當我讀到時我有一個頓悟：浮動列開始「浮動」在父元素文本中第一個出現的位置。

原則代碼我是正確的：

<div> 
    <span style="float:left">span (float left)</span> 
    <div>greedy div</div> 
    <span style="float:right">span (float right)</span> 
</div> 

然而，創建以下：

+-------------------+--------------------------+--------------------+ 
| span (float left) |     greedy div     | 
+-------------------+--------------------------+--------------------+ 
               | span (float right) | 
               +--------------------+ 

因此，元素的順序必須是span, span, div，否則向右浮動範圍被逼到下面的線上（貪婪的div偷了它的位置）。

因此，解決方法：

<div> 
    <span style="float:left">span (float left)</span> 
    <span style="float:right">span (float right)</span> 
    <div>greedy div</div> 
</div> 

和隨後的結果：

+-------------------+--------------------------+--------------------+ 
| span (float left) |  greedy div  | span (float right) | 
+-------------------+--------------------------+--------------------+ 

我希望這是明確的:)

Answer 2

你不」實際上不得不使用HTML表格元素，而是可以使用display: table/table-row/table-cell來設置任何元素的行爲方式。