材料設計精簡垂直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-cell - X-col / yyy /來自mdl網格

看看這個改變了的codepen

Answer 2

您可以在要添加間隔符的位置添加一個空的<div class="column-expander"></div> ，這個到您的css：

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

Answer 3

避免演示mdl組件

您需要做的就是將卡組件放在網格單元格中，例如：

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

mdl網格系統具有默認空間，因此如果將卡組件放入單元格內，則卡將自動采用默認網格空間。

這是codepen示例：

卡之間增加空間

<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演示組件。