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;
}

原因是这个隐藏的东西是在图像清晰之后：两者，这使得块引用足够高以包含文本和图像。通过暂时给出blockquote边框来查看它的实际效果：

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

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

短父元素中浮动图像上的不需要的下边距

1 个答案: