Welche Methoden gibt es, um ein mehrspaltiges Layout in CSS3 zu implementieren?

So implementieren Sie ein mehrspaltiges Layout in CSS3: 1. Verwenden Sie Float, um ein mehrspaltiges Layout zu implementieren. 2. Verwenden Sie das Inline-Block-Box-Modell, um ein mehrspaltiges Layout zu implementieren 4. Verwendung Die Methode „display: table“ implementiert ein mehrspaltiges Layout.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Css Mehrere Möglichkeiten, ein mehrspaltiges Layout zu implementieren

Angenommen, die folgenden drei Divs werden in derselben Zeile angezeigt

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

1: Float hat viele Implementierungen Spaltenlayout

Das Float-Attribut steuert, ob und wie die Ziel-HTML-Komponente floatet. Nach dem Festlegen dieser Eigenschaft wird das Objekt als Blockkomponente behandelt. Es gibt vier Float-Werte: left (nach links schwebend), Right (nach rechts schwebend), none (nicht schwebend), inherit (den Wert des übergeordneten Elements erben) Setzen Sie box1, box2 und box3 auf float Wenn das nächste Geschwisterelement eines schwebenden Elements ebenfalls auf die gleiche schwebende Richtung eingestellt ist, wird es unmittelbar nach dem neuen Element angezeigt.

Nach dem Festlegen von Float bricht das Element aus dem normalen Dokumentenfluss ab. Ihre übergeordneten Elemente werden nicht gestreckt, daher beträgt die Höhe von #parent zu diesem Zeitpunkt 0.

    #parent>div{
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        text-align: center;
 
    }
   #box1{
       background-color:red;
   }
   #box2{
       background-color:yellow;
   }
    #box3 {
        background-color:blue;
    }

Wir können Box1 und Box2 auch so einstellen, dass sie nach links schweben, und Box3 so, dass sie nicht schweben. Da Box1 und Box2 auf Float eingestellt sind, sind sie vom normalen Dokumentenfluss getrennt. Für Box3 ist es so, als ob Box1 und Box2 davor nicht vorhanden wären. Box3 wird ebenfalls in dieser Zeile angezeigt, aber es wird von Box1 blockiert. Wenn Sie den Rand links:400px von Box3 festlegen, sieht es so aus, als ob es hinter Box1 und Box2 angezeigt wird. Zu diesem Zeitpunkt wird #parent von Box3 geöffnet und die Höhe beträgt jetzt 202 Pixel.

    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
 
    }
    #box1{
       float:left;
        background-color:red;
    }
    #box2{
        float:left;
        background-color:yellow;
    }
    #box3 {
        margin-left:400px;
        background-color:blue;
    }

2: Inline-Block-Box-Modell

Die Elemente des Inline-Block-Box-Modells belegen nicht eine Zeile und es unterstützt auch die Angabe von Breite und Höhe mit Breite und Höhe. display:inline-block rendert das Objekt als Inline-Objekt, der Inhalt des Objekts wird jedoch als Blockobjekt gerendert. Nachfolgende Inline-Objekte werden in derselben Zeile angeordnet. Normalerweise müssen Sie „vertikal-align:top“ festlegen, um die Oberseite auszurichten.

    #parent>div{
        display:inline-block;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

Inline-Block Es entsteht eine Lücke zwischen horizontal dargestellten Elementen, wenn sie in Zeilenumbrüchen oder durch Leerzeichen getrennt angezeigt werden. Wenn Sie die Leerzeichen entfernen, verschwinden die Lücken natürlich, sodass die Lücken nicht angezeigt werden.

<div id="parent">
    <div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</div>

3: display: flex Flexibles Layout

Stellen Sie das Diaplay des #parent-Containers ein:flex; der übergeordnete Container entspricht einer flexiblen Box. Die darin enthaltenen Divs werden gemäß dem durch die Flexrichtung festgelegten Muster angeordnet. Die Funktion des flexiblen Flex-Layouts ist relativ leistungsstark und bietet dem Box-Modell maximale Flexibilität zur Implementierung komplexer Layouts. Jeder Container kann als Flex-Layout bezeichnet werden. Das Attribut „flex-direction“ bestimmt die Richtung der Hauptachse.

    #parent{
        display: flex;
        flex-direction: row;
    }
    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

4: display: table

display:table Das Element mit diesem Attributsatz wird als Tabelle auf Blockebene angezeigt, ähnlich wie

#parent{
        display: table;
    }
    #parent>div{
        display:table-cell;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }