Comment implémenter une disposition à trois colonnes en CSS

Méthode d'implémentation :

1. float float flottant

<section class=&#39;layout float&#39;>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中间的自适应元素--浮动</div>
         </article>
     </section>

Principe : les divs gauche et droite sont séparés du flux de documents en raison du flottement, et le centre se déplacera vers le haut, ce qui donnera l'effet d'une disposition en trois colonnes (à condition que les hauteurs soient les mêmes)

Avantages : Haute compatibilité

Inconvénients : Les flotteurs doivent être dégagés pour éviter d'affecter autres éléments

Si la hauteur n'est pas fixe , le contenu au milieu sera étiré, et les côtés gauche et droit ne seront pas étirés ensemble

(Tutoriel recommandé : Tutoriel CSS )

2. Positionnement absolu

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--绝对定位
            </div>
            <div class="right"></div>
         </article>
     </section>

Principe : utilisez le positionnement et la largeur absolus pour fixer les divs gauche et droit, et la largeur du div du milieu aura un effet adaptatif

Avantages : Rapide

Inconvénients : Si l'élément parent est détaché Sans le flux de documents, les éléments enfants se détacheront définitivement du flux de documents, et il n'y a pas beaucoup de scénarios d'application

Si la hauteur de l'élément du milieu augmente, la hauteur des éléments des deux côtés n'augmentera pas, donc seul le div du milieu s'agrandira

3 Disposition flexible

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--flex布局
            </div>
            <div class="right"></div>
         </article>
     </section>

Principe : définissez le. élément parent pour modifier la mise en page, puis définissez flex sur 1 pour l'élément central afin d'obtenir un effet adaptatif

Avantages : Couramment utilisé dans le développement réel

Inconvénients : les navigateurs IE8 et inférieurs ne prennent pas en charge

Si la hauteur n'est pas fixe, une fois la hauteur du contenu central agrandie, les deux côtés seront également agrandis

4. Disposition de la table

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

Principe : définissez la Élément parent à la disposition du tableau, puis chaque élément enfant est une cellule teble. Définissez une largeur fixe pour les grilles gauche et droite, et la grille du milieu peut obtenir un effet adaptatif

Avantages : Bonne compatibilité, peut être utilisé. en remplacement de la disposition flexible sous IE8

Inconvénients : Limitations

Si la hauteur n'est pas fixée, lorsque le milieu est étiré, les côtés gauche et droit le seront également. Il est étiré, semblable à flex

5. Disposition en grille

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右两格都是300px，中间是自适应*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--grid布局
            </div>
            <div class="right"></div>
        </article>
    </section>

Principe : définissez l'élément parent sur la disposition en grille, puis spécifiez la hauteur et la largeur de chaque cellule, utilisez simplement Définissez simplement la couleur de chaque cellule séparément

Avantages : La technologie est relativement nouvelle et pratique

Inconvénients : La compatibilité n'est pas très bonne

Si la hauteur n'est pas fixe, ajoutez du texte à l'élément du milieu, ce ne sera pas le cas. ouvrir

Tutoriels vidéo associés recommandés : tutoriel vidéo CSS

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!