Comment implémenter une mise en page à trois colonnes avec CSS ? 3 façons d'implémenter une mise en page à trois colonnes (exemple de code)-tutoriel CSS-php.cn

Comment implémenter une mise en page à trois colonnes avec CSS ? 3 façons d'implémenter une mise en page à trois colonnes (exemple de code)

青灯夜游

Libérer： 2018-10-24 16:29:19

avant

8573 Les gens l'ont consulté

Le contenu de cet article est de présenter comment implémenter une mise en page à trois colonnes avec CSS ? 3 façons d'implémenter une mise en page à trois colonnes (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La disposition à trois colonnes signifie que les deux colonnes des deux côtés ont une largeur fixe et que la largeur au milieu est adaptative.

Trois méthodes couramment utilisées :

Positionnement
Flottant
Élastique Disposition des boîtes

Méthode de positionnement

La méthode la plus intuitive et la plus facile à comprendre, sélectionnez le positionnement absolu pour les colonnes de gauche et de droite et corrigez les des deux côtés de la page Sur le côté, le corps du milieu choisit d'utiliser la marge pour déterminer la position

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位方法创建三列布局</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        position: absolute; /* 绝对定位，使位置固定 */
        left: 0;
        top: 0;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        position: absolute; /* 绝对定位，使位置固定 */
        right: 0;
        top: 0;
    }

    </style>
</head>
<body>
    <div>Left</div>
    <div>Center</div>
    <div>Right</div>
</body>
</html>

Copier après la connexion

Résultat

Méthode flottante

Laissez les parties gauche et droite flotter et utilisez la marge pour vous adapter à la partie centrale après vous être détaché du flux de documents

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动法创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        float: left;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;
        min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        float: right;
    }
    </style>
</head>
<body>
    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>

Copier après la connexion

Disposition de la boîte flexible

Utilisez un conteneur pour envelopper les trois colonnes et définissez l'affichage du conteneur pour qu'il soit flexible, définissez la largeur des parties gauche et droite sur fixe, définissez la flexibilité du milieu à 1, et définissez les valeurssur les côtés gauche et droit, donc celui du milieu adaptatif

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹性盒子创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
    }
    .center{
        height: 600px;
        flex: 1;
        background-color: purple;
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>
</body>
</html>

Copier après la connexion

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!