CSS连续浮动多个元素

Question

我有一个带标题栏div的面板div。在标题栏中，我可能在右侧有几个不同的图标（在运行时确定）。我正在尝试构建CSS，因此图标将始终尽可能地向右堆叠，并且还有标题文本不会在图标上运行（即，如果图标文本没有在图标上运行（如果必要）。我只是无法做到正确。对于我的图标，我有<img class="icon" ...>其中

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

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

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

非常感谢任何帮助！

Answer 1

将以下规则添加到您的文本元素的CSS中可能会有所帮助：

white-space: nowrap;

Answer 2

我想我已经开始工作了。

基本上，我在div中有标题文本（也是尝试过的跨度）。但如果我没有把它放在任何东西（即它是主标题div的一部分），一切似乎都有效。