如何使用float實現文字環繞圖片
- 王林轉載
- 2020-05-11 09:09:253698瀏覽
先來看看效果圖：
#具體程式碼如下：
<!DOCTYPE html>
<html>
<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>推薦教學：css快速入門
以上是如何使用float實現文字環繞圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：關於css選擇器的介紹下一篇：關於css選擇器的介紹