2016-11-08 3 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; 
Смежные вопросы