HTML+CSS Démarrage facile avec le modèle flottant

L'élément en forme de

est si imposant qu'il occupe sa propre rangée. Et si nous voulons que deux éléments en forme de bloc soient affichés côte à côte ? Ne vous inquiétez pas, définir l'élément sur float peut réaliser ce souhait.

Aucun élément ne peut être flottant par défaut, mais il peut être défini comme flottant à l'aide de CSS. Des éléments tels que div, p, table, img, etc. peuvent être définis comme flottants

Faisons-le. this Écrivez un exemple flottant, le code est le suivant

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
    }

    #dv2{
      width:100px;
      height:100px;
      background:red;
    }
</style>
</head>
<body>
      <div id="dv1"></div>
      <div id="dv2"></div>
</body>
</html>

Le code ci-dessus indique que l'élément de bloc div occupe une ligne exclusive. Nous devons maintenant les mettre sur une seule ligne pour les afficher, puis ajouter une certaine distance entre eux. les deux div. Veuillez consulter le code suivant :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      float:left;
    }

    #dv2{
      width:100px;
      height:100px;
      background:red;
      float:left;
      margin-left:5px;  /*调节俩个div之间的距离*/
    }
</style>
</head>
<body>
      <div id="dv1"></div>
      <div id="dv2"></div>
</body>
</html>

De cette façon, l'effet souhaité est terminé. Tout d'abord, nous devons créer un flotteur vers la gauche pour le premier div, et de même pour le second. un. Ensuite, les deux seront liés ensemble et affichés sur la même ligne

Ensuite, nous faisons une bordure gauche pour le deuxième div et c'est tout

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>流动模式下的内联元素</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; float:left; } #dv2{ width:100px; height:100px; background:red; float:left; margin-left:5px; /*调节俩个div之间的距离*/ } </style> </head> <body> <div id="dv1"></div> <div id="dv2"></div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML+CSS Démarrage facile avec le modèle flottant

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]