html - Css 强制文本根据下一个元素换行

Question

我有这个代码:

HTML:

<div>
    <h1>long string </h1>
    <div class="button">
        <a>button1</a>
        <a>button2</a>
        <a>buttonX</a>
    </div>
</div>

CSS:

h1 {
    float:left;
    vertical-align:top;
}
.button {
    float:right;
}

.button a {
    display:inline-block;
    width:100px;
    background-color:red;
    vertical-align:top;
    margin:5px;
}

这是一个 jsFiddle:http://jsfiddle.net/a88rB/1/

为了简单起见，我只保留了最少的标签。

目前，两者(带有“按钮”的 h1 和 div)都在同一行上。但是如果 h1 因为像

这样的真正的长字符串

<h1>long string long string long string long string long string long string long string long string long string long string </h1>

http://jsfiddle.net/a88rB/2/

按钮在 h1 下方。

我并不总是知道我将拥有多少个按钮。

有没有办法将 div.button 的宽度设置为它的内容，并将 h1 的宽度设置为父级的其余部分，这样如果 h1 足够长，它会自动换行并将按钮保留在顶部？

附言。我不需要 ie7 的支持

Answer 1

Fiddle!您可以重新排列 html，使按钮位于顶部:

<div>
    <div class="button">
        <a>button1</a>
        <a>button2</a>
        <a>buttonX</a>
    </div>
    <h1>long string long string long string long string long string long string long string long string long string long string </h1>
</div>

如果你想要 <h1>留在顶部，从同一条“线”开始，删除 h1 { float:left; }规则。