Chacune de mes colonnes a des hauteurs différentes. Comment puis-je ordonner ma colonne horizontalement au lieu de vertical en utilisant CSS? Aussi en survolant chaque élément, la hauteur augmentera un peu sans se chevaucher sous les éléments.
123 456 789
147 258 369
La commande actuelle est
<div class="parent">
<div class="child" style="height:100px">1</div>
<div class="child" style="height:120px">2</div>
<div class="child" style="height:200px">3</div>
<div class="child" style="height:100px">4</div>
<div class="child" style="height:50px">5</div>
<div class="child" style="height:100px">6</div>
<div class="child" style="height:100px">7</div>
<div class="child" style="height:100px">8</div>
<div class="child" style="height:100px">9</div>
</div>Mais j'ai besoin de
.parent{
/*display: flex;
flex-flow: column wrap;
height:600px; */
column-count: 3;
column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
.child{
}
.child:hover{
min-height:300px;
}
3 Réponses :
C'est facile si vous structurez le HTML différemment:
<div class="parent">
<div class="column">
<div class="child" style="height: 25px">1</div>
<div class="child" style="height: 30px">4</div>
<div class="child" style="height: 40px">7</div>
</div>
<div class="column">
<div class="child" style="height: 30px">2</div>
<div class="child" style="height: 20px">5</div>
<div class="child" style="height: 30px">8</div>
</div>
<div class="column">
<div class="child" style="height: 30px">3</div>
<div class="child" style="height: 30px">6</div>
<div class="child" style="height: 30px">9</div>
</div>
</div>
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.child {
/* Just to demonstrate */
background-color: powderblue;
margin: 1px;
}
.child:hover {
min-height: 40px;
}
Merci @pete pour la réponse. Mais ici, les écarts sont visibles entre 1 et 4, 2 et 5, etc. Cela devrait fonctionner comme une disposition de maçonnerie. J'ai aussi essayé la grille
J'ai modifié ma réponse, le résultat est-il similaire à ce que vous recherchez? Je pense que cela nécessite de structurer les
C'est une bonne solution mais dans mon cas je ne suis pas en mesure de changer de structure car cela affectera ma réactivité. Dans la version mobile, il deviendra une colonne unique, donc l'ordre changera à nouveau. ordre changeant après le redimensionnement du navigateur également en colonnes comme ci-dessus, cependant.
Veuillez consulter ce lien et me faire savoir si cela a fonctionné.
https://jsfiddle.net / sreenath124 / cp2vj9sh /
html
.parent {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 200px);
grid-auto-rows: 1fr;
}
.child {
border: 1px solid;
padding: 10px;
transition: all 0.5s ease;
}
.child:hover {
transform: scale(1.1);
}
css
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
Veuillez également vérifiez ce lien si vous cherchez quelque chose comme ça. https://codepen.io/andybarefoot/pen/QMeZda
https://medium.com/@andybarefoot/ a-maçonnerie-style-layout-using-css-grid-8c663d355ebb
Merci d'avoir répondu. J'ai vérifié mais ici je ne suis pas en mesure d'ajouter un effet de survol. La hauteur de l'élément doit augmenter lorsque je survole un élément. En outre, les autres éléments doivent s'ajuster en fonction de la hauteur de survol de cet élément. Seulement la hauteur. l'échelle ne fonctionnera pas dans mon cas.
Une possibilité est d'utiliser des colonnes flex, et de trier les éléments en fonction de leur position modulo 3. Insérez également des pseudo éléments pour forcer l'enroulement
<div class="parent"> <div class="child" style="height:100px">1</div> <div class="child" style="height:120px">2</div> <div class="child" style="height:200px">3</div> <div class="child" style="height:100px">4</div> <div class="child" style="height:50px">5</div> <div class="child" style="height:100px">6</div> <div class="child" style="height:100px">7</div> <div class="child" style="height:100px">8</div> <div class="child" style="height:100px">9</div> </div>
.parent {
display: flex;
flex-flow: column;
flex-wrap: wrap;
height: 500px;
width: 300px;
}
.child {
margin: 5px;
width: 100px;
background-color: lightgreen;
transition: padding 1s;
}
.child:hover {
padding: 30px 0px;
}
.child:nth-child(3n + 1) {
order: 1;
}
.child:nth-child(3n + 2) {
order: 10;
}
.child:nth-child(3n) {
order: 20;
}
.parent:before,
.parent:after {
content: "";
width: 0px;
height: 999px;
}
.parent:before {
order: 5;
}
.parent:after {
order: 15;
}
Dans ce cas, vous devez définir une hauteur fixe, non?
@ IvanS95 Oui, je ne pense pas que cela puisse fonctionner avec une hauteur fixe. Mais cela peut être presque n'importe quelle valeur, il vous suffit de régler la hauteur du pseudos à quelque chose de plus élevé
@vals, merci pour la réponse. Est-ce possible sans la taille des parents? Mon contenu ajoute dynamiquement également réactif donc pas en mesure d'ajouter une hauteur fixe. La propriété de colonne CSS3 n'a pas besoin de la hauteur du parent. Je suis confronté à un problème uniquement dans l'ordre horizontal. flex ne fonctionnera pas dans mon cas. J'avais également essayé le flex et la grille.
Autant que je sache, il n'y a pas de solution pour votre demande en utilisant uniquement du CSS sans la hauteur fixe. Vous devrez utiliser un javascript pour cela. Une solution de contournement pourrait être de définir un conteneur avec height = viewport, puis un conteneur imbriqué avec une hauteur très élevée. (Par exemple, 10000px).
Y a-t-il toujours 3 colonnes quel que soit l'espace horizontal disponible?
3 colonnes sont toujours là mais les hauteurs sont différentes et cela devrait fonctionner comme une disposition de maçonnerie