一旦标题分成两行，浮动在标题旁边

Question

扩展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;
}

Answer 1

您可以将display: inline-block添加到.subanother1类：

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

.subanother1{
    display: inline-block;/*Add display inline block*/
    line-height: 0em;/*Set line hight to 0em*/
}

<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>

Answer 2

将.another，.subanother1和p更改为display: inline可以解决问题。

check the jsfiddle

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

Answer 3

您可以使用here等width元素进行游戏。