避免右浮動DIV環繞而不在容器中增加任何高度

Question

我試圖在沒有增加任何高度的情況下在DIV內始終對齊右側的工具欄。我發現的問題是，當盒子的寬度是100％，寬度是由內容決定時，這個工作。該HTML看起來類似於這樣：

<div class="box"> 
    <div class="title"> 
     float right 
    </div> 
    <div class="toolbar"> 
     <button>1</button> 
     <button>2</button> 
     <button>3</button> 
     <button>4</button> 
    </div> 
</div> 

我設法使它工作在Firefox，而Chrome包裝工具欄時，有沒有爲它足夠的空間，而不是增加容器的寬度。

.box { 
    border: 1px solid #ccc; 
    display: inline-block; 
    margin: 5px 0 15px; 
} 
.title { 
    display: inline-block; 
} 
.toolbar { 
    background: #eee; 
    float: right; 
    margin-left: 25px; 
} 

我想找到一個單一的一套規則，以實現這一目標，不管容器的寬度，但我的想法，除非我使用一些額外的類來區分這兩種情況。另外，我試圖避免使用overflow或clearfix，因爲我不希望工具欄影響盒子的高度。

在這撥弄我表明我已經嘗試了所有組合：http://jsfiddle.net/omegak/c4y4t/2/

Answer 1

我得到了它在一個小黑客結束工作。

我放棄了試圖標題不是float: left。然後，爲了防止箱子沒有高度，我添加了overflow: hidden。最後，黑客攻擊包括在工具欄上設置margin-bottom: -999px，以防止它爲該框添加任何額外的高度。

下面是解：http://jsfiddle.net/c4y4t/8/

Answer 2

你可以試試這個，這爲我工作。

.title { 
    float:left; 
} 

Answer 3

看看這是希望的output

更新了下面的CSS並添加clearfix類父DIV

.title { 
    float:left; 
} 

Answer 4

添加以下CSS和清除第一個div彩車。

.title { 
    float:left; 
} 

Here is the demo