communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

Comment écrire du CSS flottant à gauche

anonymity
Libérer： 2019-05-28 10:19:21
original
7631 Les gens l'ont consulté

L'attribut float de style CSS est utilisé pour définir la disposition flottante des objets d'étiquette (tels que :

boîte d'étiquette, étiquette, étiquette, étiquette et autres étiquettes HTML. ), Flottant est ce que nous appelons les objets d'étiquette flottant vers la gauche (float:left) et flottant vers la droite (float:right).

Comment écrire du CSS flottant à gauche

Que signifie flotter ?

float signifie flotter, et cela signifie aussi flotter lorsqu'il est traduit en chinois.

Le rôle de float

Définissez float (float) via CSS pour laisser le bloc de calque de style div flotter vers la gauche ou la droite (penché).

Float est souvent suivi des valeurs d'attribut left, right, none

Float:none Ne pas utiliser flottant

Float:left Flotte vers la gauche

Float:right Flotteur droit

syntaxe float :

float : aucun gauche |droit

Valeur du paramètre :

aucun : L'objet ne flotte pas

gauche : L'objet flotte à gauche

droite : L'objet flotte à droite

Cas :

Nous avons configuré une boîte. Il y a deux boîtes flottantes, une à droite et une à gauche. Afin de voir intuitivement l'effet de mise en page flottante CSS, nous définissons une certaine largeur, hauteur et bordure pour les deux boîtes. .

1. Extrait de code HTML principal : 

<div class="divcss5"> 
    <div class="divcss5_left">布局靠左浮动</div> 
    <div class="divcss5_right">布局靠右浮动</div> 
    <div class="clear"></div><!-- html注释：清除float产生浮动 --> 
</div>
Copier après la connexion
2、css代码片段：
.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
.clear{ clear:both}
Copier après la connexion

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!

Article précédent：Comment utiliser l'attribut CSS de ponctuation suspendue Article suivant：Comment utiliser l'attribut de style de contour CSS
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
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
Depuis 2024-04-06 20:57:16
0
1
487
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
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
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