CSS 连续 float 多个元素

Question

我有一个带有标题栏 div 的面板 div。在标题栏中，我可能在右侧有几个不同的图标(要在运行时确定)。我正在尝试构建 CSS，以便图标始终尽可能向右堆叠，并且标题文本不会覆盖图标(即，如果必要的)。我只是没能把它弄好。对于我的图标，我有 <img class="icon" ...>哪里

.icon {
display: block;
float: right;
padding-left: 4px;
}

图标本身看起来很好。但是，当我尝试添加实际标题时，事情就变得不稳定了。我似乎无法获得正确占用左侧剩余空间的标题。 div(或我试过的跨度)将完全位于图标下方或上方。或者有时，它会强制图标在右侧垂直堆叠，具体取决于标题的长度。

所以本质上，我正在寻找的是一个或多个固定大小的小元素水平堆叠到右上角，以及一个更长的元素来占据左侧的剩余空间，最后一个元素可能会结束根据是否有任何文本换行，在垂直方向上占用更多空间。

如有任何帮助，我们将不胜感激!

Answer 1

将以下规则添加到包含文本的元素的 css 中可能会有所帮助:

white-space: nowrap;