Maison  >  Questions et réponses  >  le corps du texte

CSS : rendu de 4 éléments sur 2 colonnes à l'aide de Colonnes : 3

Je souhaite créer une disposition en maçonnerie à 3 colonnes pour restituer des éléments de même largeur mais de hauteurs différentes, mais lorsque j'essaie le code ci-dessous, je vois que la troisième colonne est vide, ce qui semble un peu bizarre. Puis-je le réparer d'une manière ou d'une autre ?

J'ai essayé ce code, je veux avoir deux éléments dans la première colonne et un élément dans les deuxième et troisième colonnes. Attention, 4 éléments de même hauteur n'est qu'un cas précis, finalement je ne sais pas combien d'éléments il y aura et la hauteur de chaque élément.

.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粉300541798P粉300541798428 Il y a quelques jours493

répondre à tous(1)je répondrai

  • P粉281089485

    P粉2810894852023-09-09 12:16:59

    Pour ce cas vous pouvez combiner display: flexflex-wrap: wrapjustify-content: space- Between avec un conteneur

    .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>

    répondre
    0
  • Annulerrépondre