溢出:自动引起文本空白

Question

我有一个正确的浮动图像，然后是左浮动图像，两者都在围绕文本流动。我正在尝试使用Overflow：Auto将段落放在一起，但是随着视图大小的大小，浏览器将其调整了具有疯狂尺寸的某些段落(0x2000(。参考：https：//jsfiddle.net/5prgjppl/

html

<div class='content'>
  <div class='pictureOne'>
    <img src='https://dummyimage.com/500' width='100%' alt='Picture One'>
  </div>
  <div class='pictureTwo'>
    <img src='https://dummyimage.com/500' width='100%' alt='Picture Two'>
  </div>
  <div class='text'>
    <p>"Lorem ... est laborum."</p>
    <p>"Lorem ... est laborum."</p>
    ...
    <p>"Lorem ... est laborum."</p>
  </div>
</div>

CSS

.pictureOne {
  float: right;
  width: 50%;
}
.pictureTwo {
  float: left;
  clear: right;
  width: 50%;
}
.text p {
  overflow: auto;
}

用Chrome和Firefox测试。当可见溢出或删除图片时不会发生。

是否有修复程序，或者是完成同一件事的更好方法？(小提琴中的Div.Text等效是通过ckeditor实例生成的。(

Answer 1

只需在您的类中添加display: inline;：

.text p {
  overflow: auto;
  display: inline;
}

https://jsfiddle.net/emilvr/5prgjppl/1/

Answer 2

我们发现它试图将P放置在第一个图像的左侧和第二张图像的右侧。由于这两个图像均为50％，因此没有空间，因此它们会调整到0xHeaps的大小，并且仍然无法正确显示。答案是给出P 最小宽度：10px 。这将迫使浏览器将其全部发送到第二张图像的右侧(https://jsfiddle.net/5prgjppl/8/(：

.text p {
  overflow: auto;
  min-width: 10px;
}