我有一个带有标题栏 div 的面板 div。在标题栏中,我可能在右侧有几个不同的图标(要在运行时确定)。我正在尝试构建 CSS,以便图标始终尽可能向右堆叠,并且标题文本不会超出图标(即,如果必要的)。我只是没能把它弄好。对于我的图标,我有<img class="icon" ...>
哪里
.icon {
display: block;
float: right;
padding-left: 4px;
}
图标本身看起来很好。但是当我尝试添加实际标题时,事情变得不稳定。我似乎无法让标题正确占用左侧的剩余空间。div(或我尝试过的跨度)将完全位于图标下方或上方。或者有时,它会强制图标在右侧垂直堆叠,具体取决于标题的长度。
所以本质上,我正在寻找的是一个或多个固定大小的小元素水平堆叠到右上角,一个更长的元素占据左侧的剩余空间,最后一个元素可能最终占据更多空间垂直取决于是否有任何文本换行。
任何帮助将不胜感激!