javascript - 短父元素中 float 图像上不需要的底部边距

Question

我有一个只能在移动 Safari 中查看的页面，具有以下 HTML 标记:

<blockquote>
  <p><img src="..."/> A paragraph...</p>

  <p>...</p>

  ...
</blockquote>

像这样的 CSS:

blockquote {
  border-left: 1px solid #888;
}

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

当段落文本足够长时，这会产生预期的效果:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|        More paragraph, blah blah blah...
| blah blah blah, blah blah blah...

例如，参见 http://jsfiddle.net/KDYCN/

图像右侧和底部的边距需要在图像和文本之间提供所需的空白。

但是，当段落文本很短时，它会在底部产生不需要的边距。通常这不是问题，但左边的边界线使这个故障像拇指一样突出:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|

例如，参见 http://jsfiddle.net/KDYCN/1/

除了让所有报价都足够长之外，关于如何解决这个问题的任何想法？ :) 即使是 JavaScript 解决方案也是可以接受的，尽管并不理想。谢谢!

Answer 1

改变这个:

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

为此:

blockquote img {
  float: left;
  margin: 0 20px 0 0;
}

编辑:

我删除了它，它似乎起到了作用:

blockquote:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

原因是这个隐藏的东西在图像之后带有 clear:both，这使得 blockquote 足够高以包含文本和图像。通过临时给 blockquote 一个边框来查看它的实际效果:

blockquote {
    border: 1px solid #00ff00;
}

我喜欢霓虹绿，因为它很容易看到，而且通常什么都不应该是那种颜色，所以也很容易看出我是否将调试代码留在原地。