材质设计精简版垂直拉伸MDL-卡

Question

如何垂直拉伸MDL-卡，让一切都拉平？我宁愿在mdl-card__suporting-text是舒展。

这里有一个例子http://codepen.io/anon/pen/grGbdb

Answer 1

有三个问题需要处理。

首先mdl-cell元素已经行中的“最大”单元格的高度。因此，为了使卡是相同的高度“使该卡是细胞”。

<div class="mdl-cell mdl-card mdl-shadow--2dp demo-card-wide">
//...
</div>

接下来的问题是，该mdl-card__actions不是在卡的底部。 要改变这种使操作位置绝对和，并将其移至底部。

.demo-card-wide > .mdl-card__actions {
  position: absolute;
  bottom: 0px;
}

第三个问题： 现在的内容和最大的汽车的行为是重叠的。这是一个讨厌的。只有一个简单的解决办法（我知道），如果你知道行动的高度。然后，padding-bottom添加到卡上。

.demo-card-wide.mdl-card {
  /* ... */
  padding-bottom: 50px;
}

和一个评论：尽量避免卡的固定宽度。更好地利用：MDL-细胞 - X-COL / YYY从mdl grid /

看看这个改变codepen

Answer 2

您可以在您要添加的间隔点添加一个空<div class="column-expander"></div>，这对你的CSS：

.column-expander {
     flex-grow: 1;
}

Answer 3

Avoid demo mdl components

所有你需要做的就是把卡组件的网格单元内，如：

<div class="mdl-card-wide mdl-cell mdl-cell--N-col>

MDL的网格系统默认的空间，所以如果你把卡分量的小区内，该卡会自动采用默认网格空间。

这是codepen例如：

adding space between cards

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
          </div>

还记得这一点，卡组件可以是方形或宽，但如果你把卡在细胞内，你将不需要写方形或宽。

并避免MDL演示组件。