[分享]css中如何让文字包裹图片

CSS中的文本环绕技术使得我们可以让文字围绕在图片周围，大大提高了网页布局的灵活性和美观程度。下面是一些让文字环绕图片的CSS代码示例。使用float属性我们可以使用float属性让图片左浮动或右浮动...

CSS中的文本环绕技术使得我们可以让文字围绕在图片周围，大大提高了网页布局的灵活性和美观程度。下面是一些让文字环绕图片的CSS代码示例。
使用float属性
我们可以使用float属性让图片左浮动或右浮动，然后让文字环绕在图片周围。具体代码如下：

css
img {
  float: left; /*或者是right*/
  margin-right: 20px;
} 

html
<p>
  <img src="example.jpg" alt="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p> 

css
img {
  float: left; /*或者是right*/
  shape-outside: circle(50%);
} 

html
<p>
  <img src="example.jpg" alt="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p> 

css
img {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: -1;
} 

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut mauris non quam imperdiet fringilla. Nam vel velit nisi. Donec libero turpis, finibus in maximus sit amet, sodales a tellus. In non libero efficitur, facilisis elit id, vulputate odio. Suspendisse commodo libero et quam faucibus, et luctus ante tincidunt. Suspendisse aliquet vestibulum tortor id consectetur.
</p>
<img src="example.jpg" alt="example">