Comment empêcher div de s'emballer en CSS

Dans la conception Web, il existe un scénario dans lequel une série d'éléments doivent être disposés horizontalement plutôt que verticalement. Par exemple, lors de la création de tableaux ou d'affichages d'images, les éléments doivent souvent être disposés horizontalement. À ce stade, nous devons utiliser div css pour afficher sans retour à la ligne.

1. Utilisez display:inline-block

Nous pouvons utiliser la propriété display:inline-block en CSS pour obtenir la disposition horizontale des éléments div. Après avoir défini l'attribut display de l'élément div sur inline-block, les éléments div peuvent être disposés dans le même ordre de gauche à droite que le texte. Cependant, il convient de noter que cette méthode nécessite un réglage uniforme de font-size:0 sur l'élément parent, sinon des espaces apparaîtront dans l'élément div.

Exemple de code :

<style>
    .parent {
        font-size: 0; /* 必须设置为0，否则会出现空隙 */
    }
    .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

2. Utilisez float:left

Une autre façon d'obtenir un affichage CSS div sans sauts de ligne consiste à utiliser l'attribut float:left. Après avoir défini l'attribut float de l'élément div à gauche, les éléments div peuvent être disposés horizontalement. Cependant, il convient de noter que cette méthode nécessite d'effacer le flotteur sur l'élément parent, sinon la hauteur de l'élément parent s'effondrera.

Exemple de code :

<style>
    .parent {
        overflow: hidden; /* 清除浮动 */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

3. Utilisez display:flex

Dans CSS3, l'attribut display:flex est ajouté, ce qui peut facilement réaliser la disposition horizontale des éléments div. Définissez l'attribut d'affichage de l'élément parent sur flex, et les éléments enfants peuvent être automatiquement disposés et l'ordre des éléments enfants peut être ajusté, ce qui est très flexible.

Exemple de code :

<style>
    .parent {
        display: flex;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

IV. Résumé

En résumé, nous pouvons utiliser display:inline-block, float:left, display:flex et d'autres propriétés CSS pour obtenir un affichage CSS div sans retour à la ligne. Parmi eux, display:inline-block est souvent utilisé pour être compatible avec les versions inférieures des navigateurs, tandis que float:left est très stable en termes de compatibilité. Display:flex est la méthode la plus populaire et peut jouer un rôle très flexible dans le traitement de diverses mises en page complexes.

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!