如何为 material 卡片标题指定固定宽度？

Question

我试图给两张 material 卡片一个固定的标题高度，不管它们有多少内容。我希望卡片的高度为 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>

非常感谢您的帮助！

Answer 1

这也可以通过在卡片上指定最大高度来解决。

max-height: 50px;

Answer 2

删除 class "mdl-card--expand" 是另一种修复方法。

如何为 material 卡片标题指定固定宽度？

How do I specify fixed width for material card titles?

html

javascript

css

material-design

material-design-lite