Les balises définissent les divisions d'un document HTML. Cette balise est principalement utilisée pour regrouper des contenus similaires afin de faciliter le style et sert également de conteneur pour les éléments HTML.
Nous plaçons trois sections côte à côte en HTML à l'aide des balises de propriétés CSS . La propriété CSS float est utilisée à cet effet.
Voici la syntaxe de la balise Voici un exemple de placement de trois classes de partition côte à côte en HTML à l'aide des propriétés CSS. Ce qui suit est le résultat de l'exemple de programme ci-dessus. Nous modifions le style en utilisant les propriétés CSS, nous pouvons également remplacer les propriétés de style. Un autre exemple de trois balises placées côte à côte sur une page HTML est le suivant - Voici un exemple de placement de trois classes de partition côte à côte en HTML à l'aide des propriétés CSS. Ce qui suit est le résultat de l'exemple de programme ci-dessus. .
La traduction chinoise de <div class='division'>Content…</div>
Copier après la connexionExemple 1
est : Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
Copier après la connexionExemple 2
est : Exemple 2
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
<div style="width: 100px; float:left; height:100px; background:red; margin:10px">
Third DIV
</div>
</body>
</html>
Copier après la connexionExemple 3 - En créant un écran partagé
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
}
.left {
left: 50%;
background-color: yellowgreen;
}
.middle{
background-color: blueviolet
}
.right {
right: 25%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split middle"></div>
<div class="split right">
</div>
</body>
</html>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
