CSS-Lösung für mehrspaltiges Layout

1. Feste Breite + adaptiv

Erwarteter Effekt: feste Breite links, adaptive Breite rechts Allgemeiner Code:
html:

<div Klasse="übergeordnet">
    <div Klasse="links">
        <p>Linkes Menü</p>
    </div>
    <div Klasse="rechts">
        <li>richtiger Artikel1</li>
        <li>richtiges Element2</li>
        <li>richtiges Element3</li>
    </div>
</div>

CSS:

html, body, p, ul, li {
    Rand: 0;
    Polsterung: 0;
}
div.links {
    Hintergrund: #d2e3e3;
}
div.rechts {
    Hintergrund: #77DBDB;
}

Lösung 1: float

.links {
    schweben: links;
    Breite: 100px;
}
.Rechts {
    Rand links: 100px; // oder Überlauf: versteckt
}

Lösung 2: Tabelle

.übergeordnet {
    Anzeige: Tabelle;
    Breite: 100 %;
    Tabellenlayout: behoben; // https://blog.csdn.net/qq_36699230/article/details/80658742
    .links rechts {
        Anzeige: Tabellenzelle;
    }
    .links {
        Breite: 100px;
    }
}

Option 3: Flex

.übergeordnet {
    Anzeige: Flex;
    .links {
        Breite: 100px; // oder Flex: 0 0 100px;
    }
    .Rechts {
        biegen: 1;
    }
}

Zwei (oder mehr) Spalten mit fester Breite + adaptivem Layout können die obige Lösung verwenden. Die Einstellung der mittleren Spalte sollte mit der ersten Spalte übereinstimmen.
Variable Breite (zwei oder mehr Spalten) + adaptives Layout können die oben genannten Lösungen verwenden. Die Einstellung der mittleren Spalte kann mit der ersten Spalte übereinstimmen. Der Unterschied besteht darin, dass keine spezielle Breite festgelegt werden muss. Bei der Verwendung des Tabellenlayouts ist folgende Situation besonders zu beachten:

.übergeordnet {
    Anzeige: Tabelle;
    Breite: 100 %;
    // Durch die Einstellung table-layout: fixed werden die Zellen gleich breit, daher werden .left und .right hier nicht festgelegt {
        Anzeige: Tabellenzelle;
    }
    .links {
        width: 0.1%; // Setzt die Breite auf einen Mindestwert. Da table-layout: fixed nicht gesetzt ist, wird die Breite durch den Inhalt bestimmt. white-space:nowrap;
    }
}

2. Gleichbreites Layout (zwei/mehrere Spalten)

Öffentlicher Code:
html

<div Klasse="übergeordnet">
    <div Klasse="Spalte">
        <p>1</p>
    </div>
    <div Klasse="Spalte">
        <p>2</p>
    </div>
    <div Klasse="Spalte">
        <p>3</p>
    </div>
    <div Klasse="Spalte">
        <p>4</p>
    </div>
</div>

CSS

html, Text, div, p {
    Rand: 0;
    Polsterung: 0;
}
.übergeordnet {
    Breite: 800px;
    Rand: 1px, durchgehende Koralle;
    .Spalte {
        Höhe: 30px;
        Hintergrund: Biskuitporzellan;
        P {
            Hintergrund: #f0b979;
            Höhe: 30px;
        }
    }
}

Lösung 1: Float (mir persönlich gefällt das nicht, weil es zu starr ist, man muss wissen, wie viele Spalten vorhanden sind, und es den Container überschreitet, wenn ein Rahmen vorhanden ist)

.übergeordnet {
    Rand links: -20px;
    Überlauf: versteckt;
    .Spalte {
        schweben: links;
        Breite: 25 %;
        Polsterung links: 20px;
        Box-Größe: Rahmenbox;
    }
}

Option 2: Flex (empfohlen)

.übergeordnet {
    Anzeige: Flex;
    .Spalte {
        biegen: 1;
        &+.Spalte {
            Rand links: 10px;
        }
    }
}

3. Gleichhohes Layout

Empfohlene Lösung:

.übergeordnet {
    Anzeige: Flex;
}
.links rechts {
    biegen: 1;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Webdesign-Erfahrung: Das Navigationssystem schlank machen

>>: Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden