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设置任何元素的样式，就像表格一样。

定位相邻元素

2 个答案: