当前位置: 移动技术网 > IT编程>网页制作>CSS > 3.使用float实现文字环绕图片

3.使用float实现文字环绕图片

2020年04月10日  | 移动技术网IT编程  | 我要评论

江苏卫视网上直播,上海不夜城手机网,卖萌节

使用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>

实现效果:

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网