zoukankan      html  css  js  c++  java
  • 3.使用float实现文字环绕图片

    使用float实现文字环绕图片代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            img{
                width:100px;
                height:100px;
                float:left;
                margin-right:10px;
            }
        </style>
    </head>
    <body>
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586421603&di=251ccdb6640827e0880fd5353d0ad580&src=http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg" alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias corporis omnis quae sapiente fugit! Inventore laborum alias vitae similique ipsam dolorem quam consequuntur accusamus adipisci sint earum, quaerat officia rerum laudantium expedita nobis veritatis facilis fugiat a quo in repellendus facere est perferendis. Ut sequi eius voluptatem quae, ipsa ab et, corrupti at, in maxime numquam earum dicta tempore inventore consequatur saepe debitis! Iure assumenda molestiae vel quos eligendi excepturi sapiente quaerat voluptas. Fugit minus aliquid ipsa in quia iure dolor corrupti eum quaerat necessitatibus et perferendis possimus labore culpa quam qui eaque, ex asperiores beatae obcaecati dolorem voluptatibus suscipit laudantium. Accusantium, pariatur enim in rerum nostrum temporibus similique aliquid excepturi corrupti? Facere suscipit iste vero praesentium soluta aliquam veniam tempore nulla amet ratione. Voluptatem eius repellendus, placeat beatae mollitia assumenda aliquam exercitationem tenetur numquam iusto! Id iure esse officia eius, veritatis temporibus delectus porro iusto, voluptatum modi laboriosam nesciunt, vel aliquam pariatur magni nemo. Voluptatem, dolorum quae. Quo sequi blanditiis, asperiores facere, ullam mollitia libero voluptatum doloremque nobis, provident id quas autem corporis. Ducimus nihil sapiente quas iure nulla, beatae voluptate cum optio magni voluptatibus sed inventore ad, accusantium rerum similique iste animi earum magnam ipsa. Facilis earum debitis ratione fuga perferendis eveniet mollitia maxime deserunt esse. Asperiores saepe rerum, voluptatibus iusto exercitationem magni, incidunt fugiat earum qui laboriosam illum error porro distinctio consequatur dolore.</p>
    </body>
    </html>
    index.html

    实现效果:

  • 相关阅读:
    数字图像处理的Matlab实现(2)—MATLAB基础
    数字图像处理的Matlab实现(1)—绪论
    统计分析与R软件-chapter2-6
    统计分析与R软件-chapter2-5
    统计分析与R软件-chapter2-3
    题目1143:Primary Arithmetic
    剑指OFFER之翻转单词顺序
    剑指OFFER之把数组排成最小的数
    剑指OFFER之丑数
    最大的两个数
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12667930.html
Copyright © 2011-2022 走看看