材料設計精簡版 - 在電網內卡支持文本不擴大與更大的卡

我試圖建立一個網站使用MDL。然而，使用網格內卡時，卡動作不對齊的底部時，卡比其他小的行中，像這樣的：材料設計精簡版 - 在電網內卡支持文本不擴大與更大的卡

這似乎是支持文本不不像我想要的那樣展開，但不知道我如何去做這件事。下面是從HTML相關片段：

<!-- Content --> 
<main class="mdl-layout__content"> 
    <div class="mdl-grid"> 

     <!-- Short supporting text --> 
     <div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp"> 
      <div class="mdl-card__title"> 
       <h2 class="mdl-card__title-text">Blog</h2> 
      </div> 
      <div class="mdl-card__supporting-text"> 
       A fairly recent addition detailing some of the work done on current projects. 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
       <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a> 
      </div> 
      <div class="mdl-card__menu"> 
       <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
        <i class="material-icons">share</i> 
       </button> 
      </div> 
     </div> 

     <!-- Long supporting text --> 
     <div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp"> 
      <div class="mdl-card__title"> 
       <h2 class="mdl-card__title-text">Blog</h2> 
      </div> 
      <div class="mdl-card__supporting-text"> 
       A fairly recent addition detailing some of the work done on current projects. 
       A fairly recent addition detailing some of the work done on current projects. 
      </div> 
      <div class="mdl-card__actions mdl-card--border"> 
       <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a> 
      </div> 
      <div class="mdl-card__menu"> 
       <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
        <i class="material-icons">share</i> 
       </button> 
      </div> 
     </div> 
    </div> 
</main>

...和CSS：

.home-card > .mdl-card__title { 
    color: #fff; 
    height: 176px; 
    background: url('../assets/coding-banner.jpg') center/cover; 
    padding: 0 
} 
.home-card > .mdl-card__title > .mdl-card__title-text { 
    width: 100%; 
    padding: 16px; 
    background: rgba(0, 0, 0, 0.3); 
} 
.home-card > .mdl-card__menu { 
    color: #fff; 
}

來源

2017-04-04 Fifer Sheep

DERP。將mdl-card--expand添加到支持文本格是我所需要的。

<div class="mdl-card__supporting-text mdl-card--expand"> 
    A fairly recent addition detailing some of the work done on current projects. 
</div>

來源

2017-04-04 23:12:08

材料設計精簡版 - 在電網內卡支持文本不擴大與更大的卡

回答

相關問題