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.

  • 相关阅读:
    超几何分布
    区分概率中的事件关系
    破解概率求解的策略
    j2ee的十三种技术
    jsp第1讲(上集)
    servlet第3讲(中集)----同一用户的不同页面共享数据
    servlet第3讲(上集)----同一用户的不同页面共享数据
    servlet第2讲(下集)----通过HttpServlet实现一个用户登录网站(继承HttpServlet)
    一款基于的jQuery仿苹果样式焦点图插件
    一款基于css3的散子3D翻转特效
  • 原文地址:https://www.cnblogs.com/JasmineLily/p/10901750.html
Copyright © 2011-2022 走看看