材料設計輕拉伸垂直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

避免演示MDL組件

所有你需要做的就是把卡組件內網格單元，如：

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