900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS实现文字环绕图片

CSS实现文字环绕图片

时间:2021-11-26 03:04:54

相关推荐

CSS实现文字环绕图片

原理:使用float实现,float最初的作用就是用在环绕。

HTML:

<div class="dc-left-text"><p>哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈</p><img class="dc-left-img" src="../heroes/Black Widow.jpg" /><p>哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈</p><p>哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈</p></div>

CSS:

<style>.dc-left-text{width: 428px;text-transform: capitalize;margin-top: 10px;float: left;}.dc-left-img{float: right;padding: 20px 0 20px 20px;}/* 首字下沉 */.dc-left-text::first-letter {font-weight: bold;font-size: 70px;color: #F5E327;font-family: "微软雅黑";float: left;margin-right: 10px;}/* 首字缩进连个汉字 */img ~ p{text-indent: 2em /*两个相对长度单位*/}</style>

效果:

NOTE: 英文也是可以实现文字环绕的,一般文章都是英文单词,所以给它们加上空格就好啦~

Always be confident, and don't let anyone shake your confidence.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。