Maison > Article > interface Web > Comment peut-on mettre trois parties côte à côte en HTML ?
Comment peut-on mettre trois parties côte à côte en HTML ?
- WBOYavant
- 2023-09-04 23:21:05960parcourir
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.
Grammaire
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. <div class='division'>Content…</div>
La traduction chinoise de Exemple 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>
Exemple 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>
Exemple 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>
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!