web-dev-qa-db-ja.com

MaterializeCSS行と列の高さを同じにするにはどうすればよいですか？

私はmaterializeCSSに基本的なグリッドを持っています。私の問題は、列が同じ高さではないため、レイアウトが混乱することです。私はこれがbootstrapで尋ねられたことを知っていますが、materializeCSSではどのソリューションも機能しません

これは私の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>
responsive-designgridmaterializeresponsiveresponsiveness
7
eLjAy podii

私は実際に簡単な解決策を見つけましたが、プラグインとjqueryが必要であり、これを行うことの短所についてもわかりません。

しかし、私は本当にこれをおそらく純粋なCSSで修正したいあなた自身の解決策を自由に共有してください

とにかくコードはこんな感じ

このスクリプトを読んでインストールします： 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();
});
6
eLjAy podii

これは、 グリッドシステム を適切に使用することで簡単に修正できます。

コードには、それぞれ"col m4 s6"のサイズを指定する6つのdiv要素があります。これらすべてのdivsを合計すると、24個の中列または36個の小列になります。これらの24個の中列/ 36個の小列は、単一のrow内に配置されます。これは、maxレイアウトの12列でのみ機能します。

これを軽減するには、12列幅に等しい要素の各グループを独自の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>
...

最初のフィドルを更新しました これを示すために。列の高さも固定されていることがわかります。

4
adriennetacke

SASSでは、最初のcolでclear:leftを使用します。

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;
    }
}
2
Almaju