html - Div 应该是它的 child 的宽度，而另一个 child 应该换行

Question

我有一个简单的容器，可以容纳一些动态内容。它应该看起来像这样:

--------------------     -------------------------------
| This is the title |    | This is a much longer title |
--------------------     -------------------------------
| This is the text  |    | This is the text that will  |
| that will be put  |    | be put onto multiple lines  |
| onto multiple     |    | depending on the width of   |
| lines depending   |    | the title                   |
| on the width of   |    -------------------------------
| the title         |
--------------------

我希望“This is the title”设置容器的宽度，以便它始终在一行上。其他文本应换行。

JSFiddle显示问题。

Answer 1

这有效 - http://jsfiddle.net/945n1ofs/

.container 上的 inline-block 使其尽可能窄，然后是 .container 上的 white-space: nowrap >.title 强制它达到所需的宽度。

那么.container和里面的.content是相对定位的absolute就是.content不能影响 .container 的宽度，因为它在文档流之外。

最后，您只需要为 child 添加一点 top 定位以说明单行标题，并将边框移动到标题和 child 上。