Einführung in drei Methoden zum Implementieren eines zweispaltigen Layouts mit CSS (Code)

Was dieser Artikel Ihnen bringt, ist die Einführung (Code) von drei Methoden zur Implementierung eines zweispaltigen Layouts mit CSS. Ich hoffe, dass er für Sie hilfreich ist.

1. Floating-Layout

Die linke Spalte hat eine feste Breite und verschiebt sich nach links, und der Hauptinhalt auf der rechten Seite verwendet margin-left, um die Breite beizubehalten der linken Spalte die Standardbreite. Bei Auto wird die verbleibende Breite automatisch ausgefüllt.

<div class="one"></div>
 
<div class="two"></div>

rrree

Die rechte Seite hat eine feste Breite und die linke Seite ist auf die gleiche Weise adaptiv. Schieben Sie einfach die feste Spalte nach rechts und verwenden Sie margin-right, um sie freizugeben seine Breite vergrößern.

        .one{
            float: left;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-left: 200px;
            height: 200px;
            background: salmon
        }

    <div class="one"></div>
    <div class="two"></div>

2. Floating-Layout + negative Ränder (zweispaltige Version des Double-Flyer-Layouts)

        .one{
            float: right;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-right: 200px;
            height: 200px;
            background: salmon
        }

        <div class="aside"></div>
    <div class="main">
        <div class="content"></div>
    </div>

3. Absolute Positionierung

        .aside{
            width: 300px;
            height: 100px;
            background:darkcyan;
            margin-right: -100%;
            float: left;
        }
        .main{
            width: 100%;
            float: left;
        }
        .content{
            margin-left: 300px;
            background: salmon;
        }

    <div class="left"></div>
    <div class="right"></div>

Verwandte Empfehlungen:

CSS-Layoutserie – obere und untere zweispaltige Layout_html/css_WEB-ITnose

CSS: dreispaltiges Layout, beidseitig fixiert, in der Mitte adaptiv_html/css_WEB-ITnose

css mehrspaltig, automatisch anpassen layout_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonEinführung in drei Methoden zum Implementieren eines zweispaltigen Layouts mit CSS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!