Beispiel für die Verwendung eines negativen Rands zum Erreichen eines durchschnittlichen Layouts in CSS

Für gleichmäßig verteilte Layouts verwenden wir im Allgemeinen die Methode des negativen Rands. Die folgende Abbildung zeigt ein durchschnittliches Layout.

In diesem Fall fügen wir normalerweise ein Div zwischen dem übergeordneten und dem untergeordneten Element ein und legen dann einen negativen rechten Rand für dieses Div fest, wobei der Wert der Entfernung zwischen den beiden untergeordneten Elementen entspricht.
Wenn wir beispielsweise die Breite jedes untergeordneten Elements auf 100 Pixel festlegen, es insgesamt 3 untergeordnete Elemente gibt und jedem untergeordneten Element einen rechten Rand von 50 Pixeln geben, sollte die Breite des übergeordneten Elements 100 x 3 + 50 x 2 = 400 Pixel betragen. Oben genannter Code:

//HTML
<div Klasse="Vater">
    <div Klasse="Mitte">
        <div Klasse="Sohn1"></div>
        <div Klasse="Sohn2"></div>
        <div Klasse="son3"></div>
    </div>
</div>

//CSS
.Sohn1,.Sohn2,Sohn3{
    Rand rechts: 50px;
    Breite: 100px;
}
.Vater{
    Breite: 400px;
}
.Mitte{
    Rand rechts: -50px;
}

Die mittlere Ebene margin-right:-50px entspricht einer „Erweiterung“ um 50 Pixel nach rechts, sodass das Element son3 Platz hat, um in derselben Zeile wie die anderen Elemente zu stehen.

Damit ist dieser Artikel über Beispiele für die Verwendung von CSS zum Erreichen eines durchschnittlichen Layouts mit negativen Rändern abgeschlossen. Weitere Informationen zum durchschnittlichen CSS-Layout mit negativen Rändern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!