0
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>
1 réponse
0
Pour ce cas vous pouvez combiner display: flex 与 flex-wrap: wrap 和 justify-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>
Outils chauds Tags
Hot Questions
Hot Tools
Collection de bibliothèques d'exécution vc9-vc14 (32 + 64 bits) (lien ci-dessous)
Téléchargez la collection de bibliothèques d'exécution requises pour l'installation de phpStudy
VC9 32 bits
Bibliothèque d'exécution de l'environnement d'installation intégré VC9 32 bits phpstudy
Version complète de la boîte à outils du programmeur PHP
Programmer Toolbox v1.0 Environnement intégré PHP
VC11 32 bits
Bibliothèque d'exécution de l'environnement d'installation intégré VC11 phpstudy 32 bits
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Sujets chauds
