MaterialiseCSS come posso rendere l'altezza della colonna riga uguale?

Question

Ho una griglia di base su materializeCSS il mio problema è che la mia colonna non ha la stessa altezza, quindi il mio layout è diventato un casino. So che questo è stato chiesto il bootstrap ma nessuno della soluzione funziona per me in materializeCSS

Questo è il mio 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> 

Answer 1

in realtà ho trovato una soluzione semplice ma richiede un plug-in e jQuery e anche io non sono sicuro degli svantaggi di farlo.

Ma non esitate a condividere la propria soluzione Ho molta voglia di risolvere questo problema con forse CSS puro

In ogni caso il codice è come questo

lettura e installare questo script: https://github.com/liabru/jquery-match-height

HTML

<div class="row"> 
    <div class="col m4 s6 sample"> 
    <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 sample"> 
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img"> 
    <p> 
     Short text 
    </p> 
    </div> 
    <div class="col m4 s6 sample"> 
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img"> 
    <p>Short text</p> 
    </div> 
    <div class="col m4 s6 sample"> 
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img"> 
    </div> 

    <div class="col m4 s6 sample"> 
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img"> 
    </div> 
    <div class="col m4 s6 sample"> 
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img"> 
    </div> 
</div> 

Javascript

$(document.ready(function(){ 
    $('.sample').matchHeight(); 
}); 

Answer 2

Questo può essere facilmente risolto con l'uso corretto di grid system.

Nel codice sono presenti 6 elementi div di cui si fornisce una dimensione di "col m4 s6" ciascuno. L'aggiunta di tutti questi divs insieme equivale a 24 colonne medie o 36 colonne di piccole dimensioni. Queste 24 colonne medie/36 piccole colonne sono posizionate all'interno di un singolo row che funziona solo con un layout max max colonne.

per alleviare questo, avvolgere ciascun gruppo di elementi che eguagliano 12 larghezza delle colonne all'interno del proprio row:

<div class="row"> 
    <div class="col m4"> 
     <p>Content</p> 
    </div> 
    <div class="col m4"> 
     <p>More Content</p> 
    </div> 
    <div class="col m4"> 
     <p>Even More Content</p> 
    </div> 
    <!-- No more room for content as three m4-sized columns equal 12. 
     Any additional content should be placed within a new row--> 
</div> 
<div class="row> 
    <!--Additional content up to 12 column widths go in here--> 
</div> 
... 

I updated your initial fiddle per dimostrare questo. Vedrai che anche le altezze delle colonne sono state corrette.

Answer 3

Con SASS, uso clear:left sul primo col.

Esempio per s4 m3 l2:

@media #{$small-and-down}{ 
    .col:nth-child(3n+1) { 
     clear: left; 
    } 
} 
@media #{$medium-only}{ 
    .col:nth-child(4n+1) { 
     clear: left; 
    } 
} 
@media #{$large-and-up} { 
    .col:nth-child(6n+1) { 
     clear: left; 
    } 
}