Maison >interface Web >tutoriel HTML >Comment peut-on mettre deux parties côte à côte en HTML ?
Comment peut-on mettre deux parties côte à côte en HTML ?
- 王林avant
- 2023-08-31 16:25:011256parcourir
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. Il sert également de conteneur pour les éléments HTML et nous pouvons facilement styliser cette balise en utilisant l'attribut class ou id. Nous pouvons placer du contenu à l'intérieur de la balise .
Grâce aux propriétés CSS, nous pouvons placer deux balises côte à côte en HTML.
Grâce aux paramètres de style, nous pouvons placer deux classes de division côte à côte.
Grammaire
Voici la syntaxe de la balise .
<div class='division'>Content…</div>
Exemple 1
Voici un exemple d'utilisation des propriétés CSS pour placer deux classes de division côte à côte en HTML.
<!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>
.division {
display: inline-block;
border: 1px solid red;
padding: 1rem 1rem;
</style>
</head>
<body>
<!--<div class='parent'>-->
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<!--</div>-->
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
Exemple 2
Dans un autre exemple d'ajout de deux balises côte à côte, nous utilisons les propriétés CSS pour les styliser en définissant la hauteur sur 100 px et en définissant la marge à l'aide de set_margin -
<!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>
</body>
</html>
Ajouter une balise parent
Nous pouvons également ajouter un parent pour placer deux divisions. Ici, la balise parent fait office de conteneur pour les classes enfants (éléments HTML).
Nous pouvons également styliser le parent en utilisant les propriétés CSS.
Grammaire
Voici la syntaxe d'une balise parent , qui contient deux balises enfants.
<div class='division'>Content…</div> <div class='division'>Content…</div>
Exemple 1
Vous trouverez ci-dessous un exemple de placement de deux balises côte à côte en HTML. Dans ce programme, nous utilisons la classe parent pour ajouter plus de styles dans un document HTML.
<!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>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
Exemple - en créant un écran partagé
Vous trouverez ci-dessous un exemple de placement de deux balises div côte à côte en divisant l'écran en deux.
<!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: 0;
background-color: yellowgreen;
}
.right {
right: 0;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
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!