Wie implementiert man ein dreispaltiges Layout mit CSS? 3 Möglichkeiten, ein dreispaltiges Layout zu implementieren (Codebeispiel)-CSS-Tutorial-php.cn

Wie implementiert man ein dreispaltiges Layout mit CSS? 3 Möglichkeiten, ein dreispaltiges Layout zu implementieren (Codebeispiel)

青灯夜游

Freigeben： 2018-10-24 16:29:19

nach vorne

8577 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man ein dreispaltiges Layout mit CSS implementiert. 3 Möglichkeiten, ein dreispaltiges Layout zu implementieren (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Dreispaltiges Layout bedeutet, dass die beiden Spalten auf beiden Seiten feste Breiten haben und die Breite in der Mitte anpassbar ist.

Drei häufig verwendete Methoden:

Positionierung
Schwimmend
Elastisch Box-Layout

Positionierungsmethode

Die intuitivste und am leichtesten verständliche Methode: Wählen Sie die absolute Positionierung für die linke und rechte Spalte und korrigieren Sie sie sie auf beiden Seiten der Seite. Auf der Seite entscheidet sich der mittlere Text dafür, den Rand zu verwenden, um die Position zu bestimmen

<!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>

Nach dem Login kopieren

Ergebnis

Floating-Methode

Lassen Sie den linken und rechten Teil schweben und verwenden Sie den Rand, um ihn an den mittleren Teil anzupassen, nachdem Sie sich vom Dokumentenfluss gelöst haben

<!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>

Nach dem Login kopieren

Flexibel Box-Layout

Verwenden Sie einen Container, um die drei Spalten zu umschließen, und die Anzeige des Containers ist auf Flex eingestellt, die Breite des linken und rechten Teils ist auf fest eingestellt, der mittlere Flex ist auf eingestellt 1, und die Werte der linken und rechten Seite sind fest, also ist die Mitte adaptiv

 <!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie implementiert man ein dreispaltiges Layout mit CSS? 3 Möglichkeiten, ein dreispaltiges Layout zu implementieren (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!