Comment écrire du CSS flottant à gauche

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).

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>

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}

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：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

• Comment déterminer le type de chaîne en python
  2019-06-20 10:20:19
• Comment définir des entiers en python
  2019-06-20 10:15:07
• Comment utiliser la confiture en python
  2019-06-20 10:08:31
• Où est inactif dans le package d'installation de Python ?
  2019-06-20 10:01:17
• où est la documentation python
  2019-06-20 09:34:05
• Comment dessiner une carte des précipitations en python
  2019-06-21 15:03:24
• Comment utiliser Python pour développer des applications mobiles
  2019-06-19 09:41:36
• Quels sont les outils de programmation Python ?
  2019-06-19 09:33:54
• Où télécharger Python
  2019-06-19 09:26:29
• Où est l'idée fournie avec Python ?
  2019-06-19 09:18:16

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>

• css
• centré sur CSS
• Comment insérer des images en CSS
• CSS au-delà de l'affichage...
• couleur de la police CSS
• qu'est-ce que le CSS
• Comment écrire un triangle en CSS
• CSS définir la couleur du texte