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.

转载于:https://www.cnblogs.com/JasmineLily/p/10901750.html