2016-11-08 109 views
0

我試圖給出兩張素材卡片的固定標題高度,不管它們有多少內容。我想卡的高度爲15px,但由於某種原因,他們不會調整。固定寬度素材卡片標題

<head> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script> 

    <style> 
    .demo-card-square > .mdl-card__title { 
    background-color: lightblue; 
    height: 50px; 
    } 
    </style> 
</head> 

<body> 
    <div class="mdl-grid"> 

    <div class="demo-card-square mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col"> 
     <div class="mdl-card__title mdl-card--expand"> 
     <h2 class="mdl-card__title-text">Box</h2> 
     </div> 
     <div class="mdl-card__supporting-text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenan convallis. 
     </div> 
     <div class="mdl-card__actions mdl-card--border"> 
     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
      View Updates 
     </a> 
     </div> 
    </div> 

    <div class="demo-card-square mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col"> 
     <div class="mdl-card__title mdl-card--expand"> 
     <h2 class="mdl-card__title-text">Box</h2> 
     </div> 
     <div class="mdl-card__supporting-text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Aenan convallis. 
     </div> 
     <div class="mdl-card__actions mdl-card--border"> 
     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
      View Updates 
     </a> 
     </div> 
    </div> 

    </div> 
</body> 

你的幫助是極大的讚賞!

回答

0

刪除「mdl-card - expand」類是解決問題的另一種方法。

0

這也通過指定卡上的最大高度來解決。

max-height: 50px;