Stellen Sie sicher, dass Ihre Spalten horizontal nicht kollabieren

Sie sind vielleicht mit vertikal kollabierenden Elementen vertraut. Wenn ein Element nur andere gefloatete Elemente enthält, kollabiert das Eltern-Element auf null Höhe. Wir verwenden oft den Clear Fix dafür. Aber wenn ein Element nichts enthält, kann es auch horizontal kollabieren, was für das Layout recht unpraktisch sein kann.

Hier ist ein Beispiel für HTML für ein Drei-Spalten-Layout.

<div class="grid grid-bad">
  <div class="col col-1-3"></div>
  <div class="col col-1-3"></div>
  <div class="col col-1-3">
    I'm the last column.
  </div>
</div>

Floats sind wahrscheinlich immer noch die praktischste Methode, um Spalten vorerst zu handhaben. Wir könnten ein wirklich einfaches Grid-System wie dieses verwenden

.col {
  float: left;
}
.col-1-3 {
  width: 33.33%
}

Wenn Sie so sind wie ich, haben Sie vielleicht ein mentales Modell davon, dass etwas wie

Aber Sie könnten überrascht sein. Da die ersten beiden Spalten leer sind und nichts haben, das ihnen Höhe gibt, kollabieren sie horizontal. Die letzte Spalte, da sie etwas Inhalt enthält, respektiert ihre Breite, erscheint aber links, da die beiden Spalten davor kollabiert sind.

Wann dies passieren kann

Ich bin kürzlich auf eine Situation gestoßen, in der der Inhalt einer Spalte per Ajax geladen wurde. Die Spalte enthielt sonst nichts, daher war sie bis zum erfolgreichen Ajax-Aufruf und der Hinzufügung des Inhalts in der Breite kollabiert. Als der Inhalt kam, verschob er alle folgenden Spalten nach rechts. *Unpraktisch.*

Siehe den Pen gBCfl von Chris Coyier (@chriscoyier) auf CodePen

Es passiert Ihnen vielleicht nie. Vielleicht enthalten Ihre Spalten immer eine Art Inhalt. Dann ist es keine große Sache. Aber wenn Sie ein Grid-Framework erstellen, selbst für sich selbst, sollten Sie dieses Szenario wahrscheinlich in Betracht ziehen.

Wie man es behebt

Die Spalten benötigen eine Art von Inhalt, der ihnen mindestens 1 Pixel Höhe verleiht. Dadurch kollabieren sie nicht in der Breite. Manchmal haben Spalten Polsterung, das funktioniert gut. Wenn eine Spalte obere oder untere Polsterung oder einen oberen oder unteren Rand hat, ist alles in Ordnung. Wenn nicht, können Sie einfach eine Mindesthöhe festlegen.

/* Any of these with positive lengths will work */

.col {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 1px;
}

Ja, nicht sehr häufig, aber wenn Sie ein Grid-System erstellen, sollten Sie etwas einbauen, um das Kollabieren zu verhindern.