实体化中的砌体 [英] Masonry in materializecss

问题描述

我想知道是否有任何方法可以在类似砖石结构的显示器中放置实体化卡.我想避免使用砖石之类的插件，也不必编译sass，因为它将用于aurelia应用程序，并且外部库的配置等使我非常痛苦.

I would like to know if there is any way to have materializecss cards in a masonry-like display. I would like to avoid plugins like masonry, or having to compile sass, because this will be used on an aurelia application, and the configuration of external libraries and such pains me dearly.

我遇到的最接近的东西是: http://codepen. io/mike-north/pen/MwVoYp?editors = 1100 ，它通过以下方式实现:

The closest thing I have come across is this: http://codepen.io/mike-north/pen/MwVoYp?editors=1100, which does so through:

.cards-container {
  column-break-inside: avoid;
  .card {
    display: inline-block;
    overflow: visible;
  }
}

A，我无法使用sass到css编译器来使其正常工作.问题是卡片显示损坏了，如可在此图片中看到的.我尝试过的其他方法导致的结果相同:卡破了.任何帮助将不胜感激.

Alas, I have been unable to get it to work using a sass to css compiler. The problem is the card reveals are broken, such as can be seen in this picture. Other methods I have tried result in the same: broken cards. Any help will be appreciated.

推荐答案

.cards-container {
  column-break-inside: avoid;
}
.cards-container .card {
  display: inline-block;
  overflow: visible;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
@media only screen and (min-width: 601px) {
  .cards-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.text-center {
  text-align: center;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" />
<div class="container">
  <div class="row">
    <div class="col s12">
      <h2 class='text-center'>Multi-column <a href="http://materializecss.com">MaterializeCSS</a> card flow</h2>
      <h4 class='text-center grey-text lighten-3'>
        By <a href="https://twitter.com/michaellnorth">@MichaelLNorth</a>
      </h4>
    </div>
  </div>
  <div class="row">
    <div class="col s12 cards-container">
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           <p>This card has some extra info, which will make it taller. This is OK because we're using CSS columns!!!</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>
       <div class="card blue-grey darken-1">
         <div class="card-content white-text">
           <span class="card-title">Card Title</span>
           <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
         </div>
         <div class="card-action">
           <a href="#">This is a link</a>
           <a href="#">This is a link</a>
         </div>
        </div>      
    </div>
  </div>
</div>

看这个人，这是在工作yayayayayay .....

LOOK AT this man this is working yayayayayay.....

这篇关于实体化中的砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！