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.

  • 相关阅读:
    【Pascal's Triangle II 】cpp
    【Pascal's Triangle】cpp
    【Substring with Concatenation of All Words】cpp
    【Multiply Strings】cpp
    【Minimum Window】cpp
    【Merge Intervals】cpp
    【Insert Interval】cpp
    认识GIT之入门
    数据结构学习系列之线性表(四)
    VBox虚拟机与主机(宿主)通讯原理以及socat(套接字猫)简单介绍
  • 原文地址:https://www.cnblogs.com/JasmineLily/p/10901750.html
Copyright © 2011-2022 走看看