Comment afficher deux divs côte à côte

Les méthodes sont les suivantes : 1. Définir deux éléments div sur l'attribut "float:left;" ; 2. Utiliser la disposition flexible de CSS pour afficher facilement les éléments côte à côte ; 3. Utiliser la disposition en grille de CSS pour réaliser également des éléments côte à côte ; . montrer.

Pour afficher deux div côte à côte, vous pouvez utiliser les méthodes suivantes :

En utilisant l'attribut float En CSS, vous pouvez définir deux éléments div sur l'attribut float:left afin qu'ils soient affichés côté ; à côté. L'exemple de code est le suivant :

<style>
    .div1, .div2 {
        float: left;
        width: 50%; /* 两个div据父素宽度的一半 */
 }
</>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>

Utiliser la disposition flexible : l'utilisation de la disposition flexible de CSS peut facilement afficher les éléments côte à côte. Définissez l'attribut d'affichage de l'élément parent sur flex et définissez l'attribut flex des éléments enfants sur 1, afin qu'ils occupent uniformément la largeur de l'élément parent. L'exemple de code est le suivant :

<style>
    .container {
        display: flex;
    }
    .div1, .div2 {
        flex: 1;
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

Utiliser la disposition en grille : l'utilisation de la disposition en grille CSS peut également permettre un affichage côte à côte des éléments. Définissez l'attribut d'affichage de l'élément parent sur grille et définissez l'attribut grille-colonne de l'élément enfant pour contrôler la position de l'élément enfant dans la grille. L'exemple de code est le suivant :

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 将父元素分为两列 */
    }
    .div1 {
        grid-column: 1; /* 第一列 */
    }
    .div2 {
        grid-column: 2; /* 第二列 */
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

Les trois méthodes ci-dessus sont couramment utilisées. Vous pouvez choisir la méthode appropriée en fonction de la situation spécifique pour obtenir un affichage côte à côte de deux div.

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!