CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten

Das Anordnungslayout zum Ausrichten der beiden Enden von Elementen ist in der tatsächlichen Entwicklung überall zu sehen. Es kann leicht erreicht werden, indem man --justify-content: space-between des Flex-Layouts verwendet. In einigen Szenarien müssen wir jedoch Kompatibilität und andere Probleme berücksichtigen, sodass wir das Flex-Layout aufgeben müssen. Wenn wir daher denselben Effekt erzielen möchten, müssen wir uns mit dem Schriftsatz befassen. Nachdem ich im Internet nach Antworten gesucht hatte, stellte ich fest, dass es nur sehr wenige wirklich einfache und substanzielle gibt, die das Problem lösen können. Tatsächlich stoße ich in tatsächlichen Projekten häufig auf diese Art von Layout, daher nutze ich meine Freizeit, um die prinzipielle Implementierung hier zur Kommunikation und zum Austausch mitzuteilen.

Szenarioanforderungen

Richten Sie in einer Schachtel mit einer bestimmten Breite die beiden Enden des Artikels aus, ohne das ursprüngliche Layout der Schachtel zu beeinträchtigen.

<div Klasse="Container">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

Angenommen, wir haben diese Artikel hier

* {
        Rand: 0;
        Polsterung: 0;
    }
    
    .container {
        Breite: 1200px;
        Höhe: 500px;
        Hintergrundfarbe: Aqua;
        Rand: 0 automatisch;
    }
    
    ul {
        /* Der Schlüssel ist die Breite des Elements, das durch Verschieben des negativen Randwerts mit dem Container überlappt */
        Breite: 1220px;
        Rand links: -20px;
        Listenstil: keiner;
    }
    
    ul li {
        schweben: links;
        /* Breite = (Boxbreite - Randabstand * Anzahl der Elemente in einer Zeile - 1) / Anzahl der Elemente in einer Zeile*/
        /* (1200px - 20 * 2) / 3 */
        Breite: 386,666px;
        Höhe: 60px;
        Rand: 0px 0 20px 20px;
        Hintergrundfarbe: rot;
    }

Der Schlüssel zu CSS ist, dass wir die Breite des Elements berechnen müssen, / * Breite = (Boxbreite - Randabstand * Anzahl der Elemente in einer Reihe - 1) / Anzahl der Elemente in einer Reihe * /, hier plane ich, drei Elemente in einer Reihe in einer Reihe anzuzeigen Wenn Sie an beiden Enden ein schwimmendes Layout vorstellen, sind eine Reihe von Elementen nacheinander angeordnet, wenn die Breite der Flussrichtung nicht ausreicht, die Elemente in einer gefalteten Linie angeordnet werden. Wenn Sie sie in einem Zeile anzeigen möchten, können wir den Randwert des dritten Elements in der Tatsache einstellen, dass die Anzahl der Elemente Sie stornieren den Rand des letzten Elements in einer Zeile. Offensichtlich ist es nicht die beste Lösung, die Rand auf 0 zu setzen. Zu diesem Zeitpunkt können Sie mit dem äußeren Feld, der Breite des äußeren Feldes ul (hier verwende ich das UL -Tag, Block -Tags in Ordnung) und die -Margin -Werteinstellung.

Warum ist die Breite der äußeren Box 1220px

Dies ist die ursprüngliche Breite des Containers

Dies ist die Breite von ul. Ja, es ist größer als der Container und rechts größer. Nachdem ul mit -margin verarbeitet wurde, können die beiden Enden visuell ausgerichtet werden.

Nach dem Löschen der Hintergrundfarbe von ul wird der Effekt erzielt

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum Ausrichten mehrerer Elemente in einer Box. Weitere Informationen zur Ausrichtung von CSS-Elementboxen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!