MaterialiseCSS Jak mogę zwiększyć wysokość kolumny wiersza?

Question

Mam podstawową siatkę na materializeCSS mój problem jest moja kolumna nie jest tej samej wysokości, więc mój układ stał się bałagan. Wiem, że to nie było prosić o bootstrap ale żaden z roztworu działa na mnie w materializeCSS

To mój 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

faktycznie znalazłem proste rozwiązanie, ale wymaga wtyczki i jQuery a także mam nie jestem pewien co do tego.

Ale prosimy udostępniać własne rozwiązanie naprawdę chcę to naprawić z może czystym CSS

Zresztą kod jest podobny do tego

odczytu i zainstalować ten skrypt: 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

Można to łatwo naprawić za pomocą właściwego użycia grid system.

W kodzie masz 6 div elementów, które podałeś w rozmiarze "col m4 s6". Dodanie wszystkich tych divs razem oznacza 24 średnie kolumny lub 36 małych kolumn. Te 24 średnie kolumny/36 małych kolumn są umieszczone w jednym , który działa tylko z kolumnami max.

W tym celu złagodzenia owinąć każdej grupy elementów są równe szerokości kolumny 12 w ich własnych 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 to wykazać. Zobaczysz, że wysokość kolumn została również naprawiona.

Answer 3

Z SASS używam clear:left na pierwszym col.

Przykład dla 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; 
    } 
}