So verwenden Sie die Technologie mit negativen Rändern, um ein durchschnittliches Layout in CSS zu erreichen

Wir verwenden normalerweise Float-Layout, um die Kompatibilitätsprobleme von CSS im IE-Browser zu lösen. Beispielsweise verwendet Taobao Float-Layout, um es zu implementieren. Wir werden auf der Taobao-Seite ein Layout wie das unten gezeigte sehen.

Dieses gleichmäßig verteilte Layout der Bilder nennen wir Durchschnittslayout. Wie wird dieses Layout also erreicht? Manche Schüler denken vielleicht, dass das nicht schwer sei. Sie können einfach die Breite des übergeordneten Elements div so einstellen, dass sie der Summe der Breiten der untergeordneten Elemente entspricht. Ist es wirklich so einfach? Versuchen wir es.

prüfen

Wenn wir 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. Lassen Sie uns einige Stile festlegen. Die HTML- und CSS-Codes sind wie folgt.

//HTML
<div Klasse="Vater Clearfix">
   <div Klasse="Sohn"></div>
   <div Klasse="Sohn"></div>
   <div Klasse="Sohn"></div>
</div>

//CSS
* {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

.clearfix::nach {
  Inhalt: '';
  Anzeige: Block;
  klar: beides;
}

.Vater {
  Breite: 400px;
  Höhe: 100px;
  Rand: 10px;
  Hintergrundfarbe: #d5a4cf;
  Rand: 1px tief schwarz;
}

.Sohn {
  Rand: 1px tief schwarz;
  Hintergrundfarbe: #fff1ac;
  schweben: links;
  Rand rechts: 50px;
  Breite: 100px;
  Höhe: 100px;
}

Die Wirkung ist wie folgt

Wir haben festgestellt, dass das letzte untergeordnete Element nach unten verschoben wurde. Warum ist das so? Fragen Sie nicht warum, denn das ist CSS. Wie können wir dieses Problem also lösen? Einige Studenten sagten, dass es durch den 1-Pixel-Rand des übergeordneten Elements beeinflusst wird. Versuchen wir, ihn in einen Umriss zu ändern.

Wir haben festgestellt, dass es immer noch nicht funktioniert. Was sollen wir jetzt tun? Als Nächstes werde ich eine Methode der „negativen Marge“ vorstellen. Wir fügen eine mittlere Ebene zwischen dem übergeordneten und dem untergeordneten Element hinzu und setzen den rechten Rand dieses Divs auf -50px. Versuchen wir es noch einmal.

//HTML
<div Klasse="Vater Clearfix">
  <div Klasse="Mittleres Clearfix">
    <div Klasse="Sohn"></div>
    <div Klasse="Sohn"></div>
    <div Klasse="Sohn"></div>
  </div>
</div>

//CSS
* {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

.clearfix::nach {
  Inhalt: '';
  Anzeige: Block;
  klar: beides;
}

.Vater {
  Breite: 400px;
  Höhe: 100px;
  Rand: 10px;
  Hintergrundfarbe: #d5a4cf;
  Umriss: 1px tiefschwarz;
}

.Sohn {
  Rand: 1px tief schwarz;
  Hintergrundfarbe: #fff1ac;
  schweben: links;
  Rand rechts: 50px;
  Breite: 100px;
  Höhe: 100px;
}

.Mitte {
  Rand rechts: -50px;
}

Zu diesem Zeitpunkt haben wir festgestellt, dass das mittlere Div die drei untergeordneten Elemente „umhüllt“, indem es den rechten Rand „erweitert“ hat, wodurch ein durchschnittliches Layout erreicht wurde.

abschließend

Durch unsere Tests haben wir eine Lösung für das durchschnittliche Layoutproblem gefunden und hoffen, dass sie für alle hilfreich sein wird. Weitere Informationen zum durchschnittlichen CSS-Layout finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!