html - 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>