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 足够长，它将自动换行并将按钮留在顶部？

PS。我不需要支持ie7

Answer 1

Fiddle! You can rearrange your html so the buttons stay at the top:

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

And if you want the <h1> to stay at the top, starting on the same 'line', remove the h1 { float:left; } rule.