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

    实现效果:

  • 相关阅读:
    ./是当前目录 ../是当前的上一级目录。上上级就是../../一般绝对路径时候常用
    java web 代码
    java特点
    KVC
    架构设计:前后端分离之Web前端架构设计
    从MVC到前后端分离
    you don't have permission 错误
    为什么Tomcat的webapps目录下新建的目录不能访问html文件?
    UTF-8编码规则(转)
    Delphi 有关的网址
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12667930.html
Copyright © 2011-2022 走看看