使div擴展到可用寬度以及h1 / h2標簽

Question

這是一個JSFiddle：

http://jsfiddle.net/cKuUy/2/

---

這是我的目標的屏幕截圖：

我在瀏覽器中得到的是：

關鍵區別在於，在實際的實現中，條形圖不會填充包含div元素的可用寬度。 如果我放置： width:100% ，則條形圖會擴展到其容器寬度，但會在文本下方下降； 盡管兩個元素都向左浮動。

有什么建議么？

Answer 1

該解決方案應該有所幫助： https : //stackoverflow.com/a/1767270/1472586

基本上從條形圖中刪除float: left和width並添加overflow: hidden到它們。 您可能還需要相應地調整邊距（例如，標題上的右側填充可能會更好地工作）。