定位相邻元素

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来设置任何元素的行为方式。