CSS元素忽略填充中的图像

Question

所以，我有一个带有css的网页，其中一个元素有图像和文字。图像向左对齐，并且它延伸超过父元素的填充。

父元素尊重文本，并在添加更多文本时进行扩展，但它允许图像经过而不会延伸。

这就是它的样子：

---

这就是我想要的：

---

基本上，我希望内容元素不仅可以扩展文本，还可以扩展元素。最后，来源： http://pastebin.com/VY3P9CtJ - CSS http://pastebin.com/7sSbuvrC - HTML

Answer 1

为了清晰起见，我会使用内联样式，但请更改为以下内容：

<div id="content">
  <h1>Books</h1>
  <img src='images/vol1.jpg' style='float:left;' width='300px'/>
  <p>text text text text text text text</p><div style='clear:both'/><hr/><br>
</div>