如何在 HTML/CSS 中使文本环绕图像？

在 HTML/CSS 中文本环绕图像

问题：

我们可以创建一个环绕图像的文本块吗？图像就像图像提供吗？

答案：

当然可以！为了达到这种效果，需要使图像容器浮动。操作方法如下：

HTML 代码：

<div>
<h3 id="CSS-代码">CSS 代码：</h3>
<pre class="brush:php;toolbar:false">#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

结果：

容器的固定宽度（400 像素） ）和黄色背景创建一个文本块。宽度为 150 像素、红色背景的浮动图像 (#floated) 位于左侧，允许文本在其周围流动。

互动示例：

此技术的现场演示可以在 JSFiddle 上找到：http://jsfiddle.net/kYDgL/