css – 一旦标题分成两行,浮动在标题旁边

扩展到 Making floated text break off onto the next line基本上产生这个：

一旦标题变得更长一点,如何保留段落的浮动？

期望的结果：

http://jsfiddle.net/frank_o/06ewqwun/9/

HTML：

<div class="test">
    <h1>Test test test test test test</h1>
    <div class="another">
        <div class="subanother1">
            <p>Another test another test</p>
        </div>
    </div>
</div>

CSS：

.test {
    border: 1px solid black;
    width: 300px;
}
h1 {
    float: left;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
}
.another {
    display: inline;
    line-height: 1.5em;
}

更改.another,.subanother1和p以显示：inline将解决问题.

check the jsfiddle

.another, .subanother1, p {
    display: inline;
    line-height: 1.5em;
}