0

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

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

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

所以本质上,我正在寻找的是一个或多个固定大小的小元素水平堆叠到右上角,一个更长的元素占据左侧的剩余空间,最后一个元素可能最终占据更多空间垂直取决于是否有任何文本换行。

任何帮助将不胜感激!

4

2 回答 2

0

我想我成功了。

基本上,我在 div 中有标题文本(也尝试过 span)。但是,如果我没有将它放在任何内容中(即,它是主标题 div 的一部分),那么一切似乎都可以正常工作。

于 2012-10-12T03:16:09.970 回答
0

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

white-space: nowrap;
于 2012-10-12T01:53:57.263 回答