zoukankan      html  css  js  c++  java
  • 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{
             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.

  • 相关阅读:
    POJ
    POJ
    hdu 1569 &1565 (二分图带权最大独立集
    ZOJ
    POJ
    python-socket作业
    ACM-ICPC 2018 焦作赛区网络预赛 F. Modular Production Line (区间K覆盖-最小费用流)
    ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat (树链剖分-线性变换线段树)
    POJ 2987
    ACM-ICPC 2018 南京赛区网络预赛 G. Lpl and Energy-saving Lamps (弱线段树)
  • 原文地址:https://www.cnblogs.com/JasmineLily/p/10901750.html
Copyright © 2011-2022 走看看