如何使用div和css实现不规则图片的文字环绕？

文本环绕不规则图像

在当今的网页设计领域，遇到非矩形图像越来越常见，例如国家地图或复杂的矢量图形。通过在图像周围包裹文本可以增强这些图像的视觉效果，但这提出了一个独特的挑战：文本如何自然流动，同时与图像不规则边框保持一致的距离？

Floating Dives to定义环绕区域

Tory Lawson 在他 2011 年的博客文章“Wrapping text围绕非矩形形状。” Lawson 的方法涉及创建一系列浮动在形状旁边的 div，并遮挡文本将环绕的区域。

测量和划分形状

到定义环绕区域，使用 Fireworks 等图像编辑软件在图像顶部放置网格，并在所需文本边界周围绘制边界线。然后测量这条线的宽度并分成相等的间隔（例如，每 10 个像素）。

创建 Div

一旦确定了测量值，就会生成一个 HTML list 用于创建一系列 div。每个 div 代表换行区域中的一个垂直间隔，并向右浮动，创建一种“阻挡”效果，防止文本流过形状。

CSS 样式

最后一步是将 CSS 样式应用到 div 和文本。包装器 div 被分配了包含整个图像的宽度和高度，并且背景图像属性被设置为形状的图像。间隔 div 被分配了与间隔测量相对应的高度，并向右浮动以创建阻塞效果。最后，使用内联显示和颜色设置文本样式，使其在图像上可见。

示例代码

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

结论

虽然可能没有简单的 CSS 解决方案来解决不规则文本环绕问题形状，劳森方法提供了一种可行的方法。通过仔细测量形状并创建 div 来遮挡环绕区域，可以实现视觉上吸引人的结果，其中文本自然流动并与形状边框保持一致的距离。