[分享]css中如何把文字放到图片右边

在网页设计中，图文并茂的页面是非常常见的。我们可以用CSS将图片和文字结合起来，使得页面更加丰富多彩。有时候，我们希望将文字放在图片的右侧。这种布局方式可以让文字与图片相互呼应，更加人性化地展示页面内...

在网页设计中，图文并茂的页面是非常常见的。我们可以用CSS将图片和文字结合起来，使得页面更加丰富多彩。
有时候，我们希望将文字放在图片的右侧。这种布局方式可以让文字与图片相互呼应，更加人性化地展示页面内容。下面，我们来介绍如何使用CSS实现把文字放到图片右边。
首先，我们需要使用HTML代码来插入一张图片和一段文字，如下所示：

<div class="img-wrapper">
  <img src="图片路径" alt="图片描述">
  <p>这里是文字内容</p>
</div> 

如果直接使用CSS将文字和图片排列在一行，会发现文字会覆盖在图片上。这是因为图片默认的display属性是"inline"，即和文字在一行，所以文字会出现在图片的左侧。为了实现我们想要的布局效果，我们需要改变图片的display属性为"block"，即将其设置为块级元素。
接下来，我们可以使用CSS中的浮动属性float来控制图片和文字的位置。由于我们希望文字出现在图片的右侧，因此将图片向左浮动即可。具体代码如下：

.img-wrapper {
  overflow: hidden; /*清除浮动*/
}

img {
  float: left;
  display: block;
  margin-right: 10px; /*图片和文字之间的距离*/
}

p {
  margin: 0; /*清除段落的默认边距*/
} 

最后，我们需要为包裹图片和文字的div元素设置一个清除浮动的样式，以防止其他元素受到影响。这样，我们就成功地将文字放到图片右边了！
总结一下，实现把文字放到图片右边的步骤如下：
1. 在HTML中插入图片和文字，包裹在div元素中；
2. 在CSS中将图片的display属性设为"block"，并将其向左浮动，同时设置图片和文字之间的距离；
3. 对div元素应用清除浮动的样式，以防止其他元素受到影响。
希望这篇文章能帮助大家更好地使用CSS布局。