css 图文混编图片右浮动
要实现CSS图文混编图片右浮动的效果,可以使用以下CSS代码:
HTML代码:
<div class="container">
<img src="path/to/image.jpg" alt="Image" class="float-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dapibus nulla. Sed tristique, velit eget auctor tristique, tortor massa vulputate metus, et rutrum ex libero id ipsum. Nullam eu quam nec tortor lacinia iaculis id eu nunc.</p>
</div>
CSS代码:
.container {
overflow: hidden;
}
.float-right {
float: right;
margin: 0 0 10px 10px; /* 调整图片与文字之间的间距 */
}
在上面的代码中,我们使用了一个包含图片和段落的容器 <div class="container">。然后,我们给容器设置了 overflow: hidden; 属性,以确保容器能够包含浮动的图片。
接下来,我们给图片添加了一个类名 .float-right,并在CSS中设置了 float: right; 属性,使图片向右浮动。我们还使用 margin 属性调整了图片与文字之间的间距。
这样,图片就会向右浮动,文字会自动环绕在图片的左侧
原文地址: https://www.cveoy.top/t/topic/h65p 著作权归作者所有。请勿转载和采集!