css - 一旦标题分成两行，就会在标题旁边 float

Question

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

一旦标题变长一点，如何保持段落的 float ？

期望的结果:

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>