DEMO

Question

我在fiddler上设置了粗略的标题栏：http://jsfiddle.net/bCJts/

目前看起来还不错，但是如果缩小窗口，那么RH框最终会被推到下一行。

我想这样做，以便当左侧和右侧部分相遇时，左侧部分的宽度减小，任何文本都被截断 - 这样无论发生什么，两个部分都保持在同一条线上。

我可以想到几种方法，但没有一种方法是理想的：

1）设置一个特定的max-width属性：但是，有时LH框中没有内容，因为它会留下很大的空间，因此排除使用％的内容。固定值不合适，因为标题出现的窗口宽度可能会有所不同

2）使用js设置渲染的宽度 - 如果没有可用的css解决方案，这是我的后备位置。

Answer 1

好吧......这几乎达到了你想要的但RH的高度不同......自己看看..

DEMO

如果你想让某些东西的内容保持在同一行 - 你最好的选择是使用表格 - display:table（跨浏览器问题蔓延）方式或html {{1}方式..我已经给你了html的sol，因为它是跨浏览器兼容的。更改如下..

<table>

在css中，我添加了<div class="header"> <table> <tr> <td class="headerLeftBlock "> <span class="head1">This is my Main Title and it is getting really long sometimes</span> <br /> <span class="head2">This is my Subtitle</span> </td> <td class="headerRightBlock"> <span>Some Menu Control maybe</span> </td> </tr> </table>以启用您的LH动态内容案例

width:auto

设置标题栏样式以应对可变宽度

1 个答案:

DEMO