Maison >interface Web >tutoriel CSS >Comment utiliser float pour envelopper du texte autour des images
Comment utiliser float pour envelopper du texte autour des images
- 王林avant
- 2020-05-11 09:09:253806parcourir
Jetons d'abord un coup d'oeil aux rendus :
Le code spécifique est le suivant :
<!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>Tutoriel recommandé : Démarrage rapide avec CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Introduction aux sélecteurs CSSArticle suivant：Introduction aux sélecteurs CSS