Question

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

删除课程＆＃34; mdl-card - 展开＆＃34;是另一种解决方法。

Answer 2

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

max-height: 50px;

固定宽度的材料卡标题

2 个答案: