So implementieren Sie das Rasterlayout mit Intervallen perfekt auf der Seite

Typische Layoutbeispiele

Wie im obigen Bild gezeigt, besteht in der Mitte der Quadrate eine gewisse Lücke, und diese Lücke ist fest. Wie kann das Layout noch perfekter gestaltet werden? Wenn das Layout beispielsweise fertig ist, kann schnell ein Element hinzugefügt werden, um das gleiche Layout beizubehalten. Und wenn die zweite Zeile erscheint, wird dieses Layout immer noch nicht beeinflusst. Es besteht keine Notwendigkeit, zu viele Inhalte zu ändern.

Stellen Sie die Breite auf 100 % und die Standardbreite der Blockelemente ein

Lassen Sie uns nun über ein Problem hier sprechen. Die Standardbreite eines Blockelements ist so bemessen, dass sie eine Zeile ausfüllt. Dies kann leicht mit der Einstellung von 100 % für das Element verwechselt werden. Tatsächlich könnten wir zwar leicht annehmen, dass die Auswirkungen dieser beiden Methoden gleich sind, aber beide Methoden belegen das gesamte übergeordnete Element. Aber es gibt immer noch große Unterschiede zwischen ihnen.
Der Hauptunterschied zwischen ihnen besteht darin, wie sich die Breite des Elements ändert. Wenn der Wert auf 100 % eingestellt ist, stimmt die Breite des Elements immer mit der des übergeordneten Elements überein, und der für das Element festgelegte Rand wirkt sich nicht auf die Änderung der Breite des Elements aus. Natürlich wirkt sich nur die Breite des übergeordneten Elements auf die Breitenänderung dieses Elements aus. Wenn die Breite nicht festgelegt ist, nimmt das Blockelement eine einzelne Zeile ein und die Breite des Elements wird nicht nur vom übergeordneten Element, sondern auch vom Rand des Elements beeinflusst.

Der Einfluss der Randeinstellung auf die Breite eines Blockelements, das eine einzelne Zeile einnimmt

Beachten Sie die folgenden zwei Regeln

• Wenn ein Rand (horizontal) für ein Blockelement festgelegt wird, für das keine Breite festgelegt ist, entspricht die Summe aus dem Randwert (positiver Wert) plus der Breite des Elements der Breite des übergeordneten Elements.
• Wenn ein Rand (horizontal) für ein Blockelement festgelegt wird, für das keine Breite festgelegt ist, entspricht der Randwert (negativer Wert) genau der Distanz, um die die Breite des Elements das übergeordnete Element überschreitet.

Wie in der folgenden Abbildung dargestellt:

Beispiel für Regel 1:

Beispiel für Regel 2:

Lösung

Teilen Sie die durchschnittliche Fläche

Zuerst teilen wir den horizontalen Bereich in 5 gleiche Teile auf und ordnen sie horizontal an. Dann verwenden wir eine schwebende horizontale Anordnung und setzen jedes Element im Durchschnitt auf 20 %.

<ul Klasse="Liste">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.Liste{
 Überlauf: versteckt;
}
.Liste li{
 Breite: 20 %;
    Höhe: 100px;
    schweben: links;
}

Platzieren Sie Inhalt in jedem Bereich und verwenden Sie den rechten Rand, um Abstand zu schaffen

<ul Klasse="Liste">
  <li>
   <div Klasse="Inhalt"></div>
  </li>
  <li>
   <div Klasse="Inhalt"></div>
  </li>
  <li>
   <div Klasse="Inhalt"></div>
  </li>
  <li>
   <div Klasse="Inhalt"></div>
  </li>
  <li>
   <div Klasse="Inhalt"></div>
  </li>
</ul>

.Liste{
 Überlauf: versteckt;
}
.Liste li{
 Breite: 20 %;
    Höhe: 100px;
    schweben: links;
}
.Inhalt{
 Rand rechts: 10px;
}

An diesem Punkt können wir uns vorstellen, dass das letzte Element einen zusätzlichen Abstand von 10 Pixeln hat. Der letzte Schritt besteht also darin, dieses Abstandsproblem zu lösen.

Dehnen Sie das übergeordnete Element, um die Lücke am Ende auszublenden

Wir fügen der Liste ein weiteres Element hinzu, sodass sich die Liste unter ihrem übergeordneten Element erstreckt und nur der überzählige Teil ausgeblendet wird.

<div Klasse="Wrapper">
  <ul Klasse="Liste">
    <li>
      <div Klasse="Inhalt"></div>
    </li>
    <li>
      <div Klasse="Inhalt"></div>
    </li>
    <li>
      <div Klasse="Inhalt"></div>
    </li>
    <li>
      <div Klasse="Inhalt"></div>
    </li>
    <li>
      <div Klasse="Inhalt"></div>
    </li>
  </ul>
</div>

.Verpackung{
 Breite: 800px;
    Überlauf: versteckt;
}
.Liste{
 Überlauf: versteckt;
    Rand rechts: -10px;
}
.Liste li{
 Breite: 20 %;
    Höhe: 100px;
    schweben: links;
}
.Inhalt{
 Rand rechts: 10px;
}

Sie können die tatsächliche Wirkung überprüfen und schließlich die Wirkung erzielen, die wir am Anfang gezeigt haben! Diese Layoutmethode ist sehr skalierbar. Wenn sich 4 Elemente in einer Reihe befinden, müssen Sie nur die Breite jedes Elements auf 25 % einstellen und eins von der Anzahl der Elemente abziehen.

Damit ist dieser Artikel über die perfekte Implementierung eines Rasterlayouts mit Leerzeichen zwischen den Seiten abgeschlossen. Weitere Informationen zum Rasterlayout mit Leerzeichen zwischen den Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!