[分享]css两段以上文字环绕图片

CSS是一种可以控制页面布局和样式的语言，它被广泛应用于网页设计和开发。其中一项常见的应用就是文字环绕图片。在实现这个效果之前，我们需要有一张图片和一些文字。这里我们假设图片文件名为“example....

CSS是一种可以控制页面布局和样式的语言，它被广泛应用于网页设计和开发。

其中一项常见的应用就是文字环绕图片。在实现这个效果之前，我们需要有一张图片和一些文字。这里我们假设图片文件名为“example.jpg”，文字如下：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere, neque vitae suscipit commodo, libero massa ornare lacus, vel ornare elit velit non magna. Sed hendrerit urna id nulla euismod blandit. Aliquam erat volutpat. Integer bibendum, velit vel porta gravida, elit nulla maximus quam, a ultrices justo libero ac lorem. Sed sed sodales elit. Sed vel sollicitudin dolor. Donec in arcu eget neque aliquet dapibus. Fusce euismod porttitor libero a euismod. Etiam consequat ultricies iaculis. Sed euismod lectus eu finibus congue. Duis sapien purus, molestie at dignissim id, lacinia quis mauris. Etiam sed metus euismod, hendrerit ligula at, tempor dui. Aenean sed hendrerit tellus, eu dictum lorem. Pellentesque sodales mauris et ultrices dapibus.

现在我们需要通过CSS来让这些文字环绕图片。首先，我们需要将图片插入到HTML中，可以使用以下代码来实现：

<img src="example.jpg" alt="Example" />

为了让文字不覆盖在图片上，我们需要设置图片的浮动属性。可以使用以下代码来实现：

img{
  float: left;
  margin-right: 20px; /* 确保图片和文本之间有一定距离 */
}

现在，我们需要让文本环绕在图片的左侧。可以使用以下代码来实现：

p{
  text-align: justify; /* 保证文本两端对齐 */
}

img{
  float: left;
  margin-right: 20px;
  shape-outside: url('example.jpg'); /* 这个属性是新版CSS3中才有的，可以让文本包裹在指定形状的元素周围 */
}

这样，我们就成功地让文字环绕在图片的左侧了。