简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser les attributs CSS pour contrôler le flottement personnalisé des images sur la page ? (exemple)

藏色散人
Libérer： 2018-08-10 14:19:43
original
6087 Les gens l'ont consulté

Lorsque les novices conçoivent des pages Web, ils rencontrent parfois des problèmes avec le problème des images flottantes et ne savent pas par où commencer. Cet article vous présente principalement les connaissances pertinentes sur le flottant CSS. J'espère qu'il sera utile aux amis dans le besoin. Tout d’abord, vous devez comprendre float, un attribut important en CSS.

L'attribut float définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit. Si les éléments non remplacés sont flottants, une largeur explicite est spécifiée ; sinon, ils sont rendus aussi étroits que possible.

L'exemple de code spécifique pour l'image CSS flottante (à gauche) est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css左浮动代码测试</title>
    <style>
        img
 {
            float:left;
        }
    </style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
    <img  src="2.png" / alt="Comment utiliser les attributs CSS pour contrôler le flottement personnalisé des images sur la page ? (exemple)" >
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
    改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
    修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>
Copier après la connexion

L'effet de test du code ci-dessus est le suivant :

Comment utiliser les attributs CSS pour contrôler le flottement personnalisé des images sur la page ? (exemple)

L'exemple de code spécifique pour l'image CSS flottante (à droite) est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css右浮动代码测试</title>
    <style>
        img
 {
            float:right;
        }
    </style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
    <img  src="2.png" / alt="Comment utiliser les attributs CSS pour contrôler le flottement personnalisé des images sur la page ? (exemple)" >
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
    改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
    修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>
Copier après la connexion


Comment utiliser les attributs CSS pour contrôler le flottement personnalisé des images sur la page ? (exemple)

Remarque : tous les principaux navigateurs prennent en charge l'attribut float. La valeur de l'attribut « inherit » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8).

S'il y a très peu d'espace pour un élément flottant sur une ligne, l'élément passera à la ligne suivante, et ce processus continuera jusqu'à ce qu'une certaine ligne dispose de suffisamment d'espace.

Résume les valeurs possibles de float :

left L'élément flotte vers la gauche.

droite L'élément flotte vers la droite.

aucun Valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.

inherit spécifie que la valeur de l'attribut float doit être héritée de l'élément parent.

Cet article présente donc le problème de savoir comment faire flotter des images avec CSS. J'espère qu'il sera utile et disponible pour référence.




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!

Étiquettes associées：
css图片浮动
source：php.cn
Article précédent：Lorsque la souris passe sur l'image, comment utiliser le CSS pour ajouter un effet de bordure à l'image ? Article suivant：Comment créer un beau style de champ de recherche avec CSS ? (exemple de code)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
L'animation de la carte de survol d'image à l'aide de CSS Tailwind ne fonctionne pas comme prévu. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
Depuis 2024-04-06 13:43:17
0
1
356
J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ? J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décom...
Depuis 2024-04-06 12:52:14
0
1
339
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！