的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!您可以重新排列你的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; }規則。