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
.
section suivante