Beispiel für die Einrichtung eines mehrspaltigen Layouts gleicher Höhe mit CSS

Mehrere Spalten haben zunächst unterschiedliche Inhaltsgrößen und Höhen. Jetzt müssen Sie verschiedene anzuzeigende Hintergründe festlegen und die Höhe jeder Spalte muss einheitlich sein. Dann ist die Verwendung eines mehrspaltigen Layouts gleicher Höhe erforderlich.

Der endgültige gewünschte Effekt:

1. Echtes Layout mit gleicher Höhe

Technischer Punkt zu Flex: Flexibles Box-Layout Flex, der Standardwert ist die Funktion des integrierten Layouts gleicher Höhe.

Beim Definieren eines flexiblen Layouts gibt es einige Standardwerte.

flex-direction definiert die Richtung der Hauptachse. Der Standardwert ist row , die normalerweise horizontal angezeigt wird. Die Hauptachse des Flex-Containers ist als die gleiche wie die Textrichtung definiert. Hauptanfang und Hauptende liegen in der gleichen Richtung wie der Inhalt.

align-item definiert, wie das Flex-Element in Querachsenrichtung (vertikale Achse) der aktuellen Zeile des Flex-Containers ausgerichtet wird. Der Standardwert ist stretch und das Element wird gestreckt, um in den Container zu passen.

<div Klasse="Box">
  <div Klasse="links"></div>
  <div Klasse="Mitte"></div>
  <div Klasse="rechts"></div>
</div>

CSS

.Kasten {
  Anzeige: Flex;
}
.links {
  Breite: 300px;
  Hintergrundfarbe: grau;
}
.Mitte {
  biegen: 1;
  Hintergrund: rot;
}
.Rechts {
  Breite: 500px;
  Hintergrund: gelb;
}

Siehe den Pen equal-hight-layout-flex von weiqinl ( @weiqinl ) auf CodePen.

2. Echtes Layout mit gleicher Höhe

Tabellenzelle Technischer Punkt: Das Tabellenlayout hat natürlich die Eigenschaft der gleichen Höhe.

Wenn die Anzeige auf table-cell eingestellt ist, wird dieses Element als Tabellenzelle angezeigt. Ähnlich wie die Verwendung der Tags <td> oder <th> .

HTML-Struktur

<div Klasse="Box">
  <div Klasse="links"></div>
  <div Klasse="Mitte"></div>
  <div Klasse="rechts"></div>
</div>

CSS-Stile

.links {

  Anzeige: Tabellenzelle;

  Breite: 30 %;

  Hintergrundfarbe: grüngelb;

}

.Mitte {

  Anzeige: Tabellenzelle;

  Breite: 30 %;

  Hintergrundfarbe: grau;

}

.Rechts {

  Anzeige: Tabellenzelle;

  Breite: 30 %;

  Hintergrundfarbe: gelbgrün;

}

3. Positive und negative Werte der unteren Innen- und Außenränder im falschen Spaltenlayout mit gleicher Höhe

Implementierung: Setzen Sie die Überlaufeigenschaft des übergeordneten Containers auf „versteckt“. Geben Sie jeder Spalte unten einen großen Abstand und verwenden Sie dann negative Ränder mit ähnlichem Wert, um diese Höhe auszugleichen.

• Ohne die Skalierbarkeit zu berücksichtigen, müssen Sie nur „padding-bottom/margin-bottom“ auf den Höhenunterschied zwischen der höchsten und der niedrigsten Spalte einstellen, um den gleichen Höheneffekt zu erzielen.
• Um zu verhindern, dass die Spaltenhöhe in Zukunft deutlich zunimmt oder abnimmt, legen wir im Hinblick auf die Skalierbarkeit einen relativ großen Wert fest.

Technische Punkte

• Der Hintergrund füllt die Polsterung, aber nicht den Rand. Der Rand ist zusammenklappbar und kann auf negative Werte eingestellt werden.
• schweben: links. Durch die Verwendung von Float wird das Element aus dem Dokumentfluss herausgenommen und zum nächstgelegenen Element im Dokumentfluss verschoben. Dadurch werden drei Div-Elemente nebeneinander platziert.
• overflow:hidden; Setzen Sie die Overflow-Eigenschaft auf „hidden“ und generieren Sie einen Blockformatierungskontext (BFC), um die Auswirkungen von Float zu eliminieren. Gleichzeitig wird der Inhalt bei Bedarf so zugeschnitten, dass er in die Polsterbox passt, wobei der Teil ausgeblendet wird, der über den Container hinausgeht.

HTML-Struktur

<div Klasse="Box">

  <div Klasse="links"></div>

  <div Klasse="Mitte"></div>

  <div Klasse="rechts"></div>

</div>

CSS

.Kasten {
  Überlauf: versteckt;
}
.box > div{
  /**
  * Setzen Sie „padding-bottom“ auf einen größeren positiven Wert.
  * Setzen Sie den unteren Rand auf einen negativen Wert mit einem großen absoluten Wert.
  **/
  Polsterung unten: 10000px;
  Rand unten: -10000px;
  schweben: links;
  Breite: 30 %;
}
.links {
  Hintergrundfarbe: grüngelb;
}
.Mitte {
  Hintergrundfarbe: grau;
}
.Rechts {
  Hintergrundfarbe: gelbgrün;
}

4. Gefälschtes Layout gleicher Höhe, visueller Hintergrundeffekt

Technischer Punkt: Float und Float, und legen Sie die Breite jeder Spalte fest. Stellen Sie das übergeordnete Element auf ein Inline-Element auf Blockebene ein und verwenden Sie dann ein lineares Farbverlaufsbild, um den Hintergrund des übergeordneten Elements so einzustellen, dass der gleiche Höheneffekt hervorgehoben wird

Mit der CSS-Funktion „ linear-gradient wird ein Bild erstellt, das einen linearen Farbverlauf aus zwei oder mehr Farben darstellt.

display: inline-block , auf Inline-Elemente auf Blockebene eingestellt.

<div Klasse="Box fünf Spalten">
    <div Klasse="col"></div>
    <div Klasse="col"></div>
    <div Klasse="col"></div>
    <div Klasse="col"></div>
    <div Klasse="col"></div>
</div>

CSS

/** Sie müssen die durchschnittliche Breite jeder Spalte selbst berechnen*/

.Kasten {

  Anzeige: Inline-Block;

  Hintergrund: linearer Farbverlauf(

    nach rechts, 

    Rot, 

    rot 20%,

    blau 20%,

    blau 40%,

    gelb 40%,

    gelb 60%,

    Orange 60%,

    Orange 80%,

    grau 80%,

    grau);

} 

.col {

  schweben: links; 

  Breite: 16%;

  Polsterung: 2%;

}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.