Question

我有一段文字反对漂浮的图像;有没有办法让文字停留在图像一侧形成的边框上，但当文字流过图像底部时，文字不会在文字下方？

CSS：

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
  float: none;
  clear: both;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
  float: left;
}

HTML

<div class="textChunk">
    <img class="leftPic" src="images/joshFace.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Answer 1

尝试将overflow: auto设置为段落：

.textChunk p { overflow: auto; }

这会导致创建一个新的块格式化上下文，并且块的左边缘不会超出float的边缘（即环绕）。

请参阅演示：http://jsfiddle.net/audetwebdesign/tPC4z/

Answer 2

您将尝试此方法。添加溢出：隐藏为p元素：

p{overflow: hidden;zoom:1;}

您可以点击here了解更多信息。

Answer 3

将图像左对齐html：

web.config

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
}

浮动文本反对图像而不包裹在下面

3 个答案: