[分享]css中将文字插在图片右边

CSS中，想要将文字插在图片右边，可以使用以下两种方法。

//方法一：利用浮动属性
.img-box{
  float:left;
  margin-right:20px;
}
.text{
  overflow:hidden;//清除浮动
}

<div class="box">
  <div class="img-box">
    <img src="image.png">
  </div>
  <p class="text">这里是插在图片右边的文字</p>
</div> 

方法一就是利用浮动属性来实现，让图片浮动在左侧，设置一定的右边距，然后将文字内容包裹在一个容器中，并清除浮动即可。

//方法二：利用flex布局
.box{
  display:flex;
}
.text{
  margin-left:20px;
}

<div class="box">
  <img src="image.png">
  <p class="text">这里是插在图片右边的文字</p>
</div> 

方法二则是利用flex布局，将容器设置成flex布局，图片和文字都是容器的子元素，然后通过设置文字容器的左边距实现文字插在图片右侧。

以上就是CSS中将文字插在图片右侧的两种方法，可以根据需要选择适合自己的方法。