物化卡不在同等高度

时间:2017-09-05 22:46:14

标签: materialize

我创建了一个试图获得卡片相同高度的codepen,但我无法做到。

图片大小不同,我添加了responsive-img标签。

https://codepen.io/jgacuca567/pen/qXwXEz

    <main class="container-fluid">
     <section class="row">
      <div class="col s12 m4 l4">
       <div class="card">
        <div class="card-image">
          <img src="https://unsplash.it/4579/3271?image=1084" class="responsive-img">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <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>
        </div>
      </div>
    </div>
    <div class="col s12 m4 l4">
      <div class="card">
        <div class="card-image">
          <img src="https://unsplash.it/5472/3648?image=1083" class="responsive-img">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <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>
        </div>
      </div>
    </div>
    <div class="col s12 m4 l4">
      <div class="card">
        <div class="card-image">
          <img src="https://unsplash.it/5416/3611?image=1082" class="responsive-img">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <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>
        </div>
      </div>
    </div>
  </section>
</main>

1 个答案:

答案 0 :(得分:5)

默认物化尺寸

MaterialiseCSS为卡片(小型,中型和大型)提供三种默认尺寸。 这些可以添加如下:(直接取自docs,标题为&#34;卡片大小&#34;。)

<div class="card small">
    <!-- Card Content -->
</div>

自定义高度

如果所有图像都需要具有相同的高度,并且可以接受固定的高度,请将其添加到您的css中:

.card-image{
    height: 400px; /* Your height here */
    overflow: hidden;
}