文字转移到图片右侧的css怎么写
时间: 2023-12-26 20:06:10 浏览: 59
CSS实现文字环绕图片效果
要将文字移到图片右侧,可以使用CSS中的float属性。以下是一个示例代码:
HTML:
```
<div class="container">
<img src="image.jpg" alt="Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nisl at mauris lobortis euismod. Quisque nec odio ut ante bibendum elementum. Nullam euismod orci eget nisi dapibus eleifend. Proin euismod, ligula eget iaculis porttitor, sapien sapien tristique mi, eu tincidunt ipsum quam at nunc.</p>
</div>
```
CSS:
```
.container {
width: 100%;
overflow: hidden;
}
img {
float: left;
margin-right: 20px;
}
p {
margin: 0;
}
```
在这个示例中,我们将图片浮动到左侧,并给它一个20px的右边距。这样,段落的文本就会自动流到图片的右侧。
为了确保容器可以包含图片和段落,我们将其设置为100%的宽度,并添加了一个overflow:hidden属性。
最后,为了去除段落的默认上下间距,我们将其margin设置为0。
阅读全文