[分享]css中如何将文字放在图片右边

在CSS中，将文字放在图片右边是一种常见的布局技巧。通过使用float属性和margin属性，可以很容易地实现这种效果。 首先，在HTML中，我们需要为文字和图片分别创建一个元素。文字使用p标签，图片...

在CSS中，将文字放在图片右边是一种常见的布局技巧。通过使用float属性和margin属性，可以很容易地实现这种效果。
首先，在HTML中，我们需要为文字和图片分别创建一个元素。文字使用p标签，图片使用img标签。
接下来是CSS部分。我们将图片使用float属性向左浮动，同时为它设置一个合适的margin值，使得文字可以正确地排列。代码如下：

img {
  float: left;
  margin-right: 20px;
} 

.container {
  overflow: auto;
} 

<style>
.container {
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: auto;
  padding: 20px;
}
<br>
img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
</style>
<br>
<div class="container">
  <img src="your-image-url" alt="Your Image">
  <p>Your text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus est quis augue posuere accumsan. Nulla vehicula velit et massa efficitur maximus. Nullam pulvinar blandit malesuada. Donec et malesuada mi.</p>
</div>