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.

  • 相关阅读:
    RocketMQ之二:分布式开放消息系统RocketMQ的原理与实践(消息的顺序问题、重复问题、可靠消息/事务消息)
    Redis 发布/订阅机制原理分析
    Guava 12-数学运算
    Guava] 11
    Guava 10-散列
    Guava 9-I/O
    Guava 8-区间
    mat(Eclipse Memory Analyzer tool)之二--heap dump分析
    Python流程控制语句
    监控和管理Cassandra
  • 原文地址:https://www.cnblogs.com/JasmineLily/p/10901750.html
Copyright © 2011-2022 走看看