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

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

6116 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

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!