素材デザインライト縦ストレッチmdlカード

Question

mdlカードを垂直に伸ばして、すべてが均一になるようにするにはどうすればよいですか？私はmdl-card__suporting-textが伸びるのが好きです。

はここに対処するには、3つの問題がある例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; 
} 

そして1つのコメント：カードの固定幅を避けるようにしてください。より良い使用： 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デモコンポーネントを避けてください。