Comment peut-on mettre deux parties côte à côte en HTML ?-tutoriel HTML-php.cn

Comment peut-on mettre deux parties côte à côte en HTML ?

王林

Libérer： 2023-08-31 16:25:01

avant

1174 Les gens l'ont consulté

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.

Comment peut-on mettre deux parties côte à côte en HTML ?

Grammaire

Voici la syntaxe de la balise .

<div class='division'>Content…</div>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!