CSS中,想要将文字插在图片右边,可以使用以下两种方法。//方法一:利用浮动属性 .img-box{ float:left; margin-right:20px; } .text{ overflow:
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中将文字插在图片右侧的两种方法,可以根据需要选择适合自己的方法。
粉丝
0
关注
0
收藏
0