1. ホーム
  2. 質問と答え
  3. 同じ幅であるが高さが異なるCSSカードをマテリアライズする

同じ幅であるが高さが異なるCSSカードをマテリアライズする

2016-07-13 12 views
1

高さの異なる複数のカードを表示する画面を構築しようとしていますが、高さが異なると最高のカードの下に送信します。result同じ幅であるが高さが異なるCSSカードをマテリアライズする

しかし、私はこのように、右のそれを下回るそれが必要、次のいずれかに収まるようにしたい：desired result

このための私の構造は簡単である：

<body> 
    <main> 
     <div class="section"> 
      <div class="row container"> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
      </div> 
     </div> 
    </main> 
</body>

私はCOLSのdivタグで山車を使用して試してみましたしかし、何も働いていないut ... 誰かが私が欲しいものを作る方法を知っていますか？ありがとう。

出典

2016-07-13 Rodrigo Butzke

答えて

3

私はフレキシボックスを使用してみましたが、うまくいきませんでした。

しかし、私はこの素晴らしいjQueryのライブラリを見つけた：http://masonry.desandro.com/

が

<body> 
    <main> 
     <div class="section"> 
      <div class="row container"> 
       <div class="cards"> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
       </div> 
      </div> 
     </div> 
    </main> 
</body>

に私の構造を変更し、それらの線を使用：これは金である

$('.cards').masonry({ 
    itemSelector: '.col', 
});

出典

2016-07-14 18:41:59

関連する問題

 関連する問題