CSS: Rendern von 4 Elementen in 2 Spalten mit Columns: 3
P粉300541798
P粉300541798 2023-09-08 19:54:21
0
1
503

Ich möchte ein Mauerwerkslayout mit drei Spalten erstellen, um Elemente mit derselben Breite, aber unterschiedlichen Höhen darzustellen. Wenn ich jedoch den folgenden Code ausprobiere, sehe ich, dass die dritte Spalte leer ist, was etwas seltsam aussieht. Kann ich das irgendwie beheben?

Ich habe diesen Code ausprobiert. Ich möchte zwei Elemente in der ersten Spalte und ein Element in der zweiten und dritten Spalte haben. Bitte beachten Sie, dass es sich bei 4 Artikeln gleicher Höhe nur um einen Einzelfall handelt. Letztendlich weiß ich nicht, wie viele Artikel es sein werden und wie hoch jeder Artikel ist.

.container {
  column-count: 3;
  background-color: #f7f7f7;
  width: 588px
}

.item {
  width: 180px;
  height: 180px;
  break-inside: avoid;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
</div>

P粉300541798
P粉300541798

Antworte allen(1)
P粉281089485

对于这种情况,您可以将 display: flexflex-wrap: wrapjustify-content: space- Between 结合使用容器

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f7f7f7;
  width: 588px
}

.item {
  width: 180px;
  height: 180px;
  break-inside: avoid;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
</div>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage