html - 在图像上浮动文本而不在下面换行

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

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

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

Answer 2

你会试试这个方法。为 p 元素添加溢出：隐藏：

p{overflow: hidden;zoom:1;}

你可以点击这里了解更多。

Answer 3

将图像左对齐 html：

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

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

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