将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。您可能还需要相应地调整边距（例如，标题上的右边填充可能会更好）。