固定宽度素材卡片标题

问题描述：

我试图给出两张素材卡片的固定标题高度，不管它们有多少内容。我想卡的高度为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>

你的帮助是极大的赞赏！

答

删除“mdl-card - expand”类是解决问题的另一种方法。

答

这也通过指定卡上的最大高度来解决。

max-height: 50px;

固定宽度素材卡片标题

相关推荐