MaterializeCSS comment puis-je faire rangée hauteur de la colonne de la même manière?
J'ai une grille de base sur materializeCSS mon problème est que ma colonne n'est pas la même hauteur, donc ma mise en page est devenu un gâchis. Je sais que cela a été poser sur bootstrap mais aucune solution qui fonctionne pour moi en materializeCSS
C'est mon jsfiddle https://jsfiddle.net/zrb46zr2/1/
<div class="row">
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Looooong Looooong Looooong Looooong Looooong text
</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>
Short text
</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
<p>Short text</p>
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
<div class="col m4 s6">
<img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
</div>
</div>
OriginalL'auteur eLjAy podii | 2016-06-11
Vous devez vous connecter pour publier un commentaire.
J'ai effectivement trouvé une solution simple, mais il nécessite un plugin et jquery et aussi je ne suis pas sûr sur les inconvénients de cette situation.
Mais s'il vous plaît n'hésitez pas à partager votre propre solution que j'ai vraiment envie de le corriger cela avec peut-être pure CSS
De toute façon le code, c'est comme cela
lire et installer ce script: https://github.com/liabru/jquery-match-height
HTML
Javascript
OriginalL'auteur eLjAy podii
Ceci peut être facilement résolu avec l'utilisation correcte de la système de grille.
Dans votre code, vous avez 6
div
éléments que vous donner une taille de"col m4 s6"
chaque. En ajoutant tous cesdivs
ensemble est égal à 24 moyen de colonnes ou de 36 petites colonnes. Ces 24 moyen colonnes/36 petites colonnes sont placées à l'intérieur d'un seulrow
qui ne fonctionne qu'avec un max mise en page de 12 colonnes.Pour atténuer cela, enveloppez chaque groupe d'éléments que l'égalité de 12 largeurs de colonne à l'intérieur de leur propre
row
:J'ai mis à jour votre premier violon pour le démontrer. Vous allez voir que la colonne de hauteurs ont été corrigés.
Comment savez-vous le nombre de lignes que vous devez faire si vous avez du contenu dynamique?
Basé sur la documentation, dépassant les 12 colonnes limite semble être pris en charge. Leurs propres docs explicitement inclure des exemples de le faire lors de l'engagement dans les dispositions fluides.
OriginalL'auteur adriennetacke
Avec SASS, j'utilise
clear:left
sur la premièrecol
.Exemple pour un
s4 m3 l2
:OriginalL'auteur Almaju