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 min-width：10px 。这将强制浏览器将其全部发送到第二个图像的右侧（https://jsfiddle.net/5prgjppL/8/）：

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

溢出：自动导致文本消隐

2 个答案: