有没有办法让 materialize css 卡片面板在不同的内容大小上具有相同的宽度？

Question

<div class="container">
  <div class="row">
    <div class="col s12 m6 l6">
      <div class="card-panel">
        <i class="material-icons green-text medium">eco</i>
        <h5 class="gray-text text-darken-4">Our Mission</h5>
        <p class="center-align ">
          <span>To improve health, functioning and wellbeing of children especially the ones living with disability by creating awareness
            on importance of nutrition and healthy eating.</span> </p>
      </div>
    </div>
    <div class="col s12 m6 l6">
      <div class="card-panel">
        <i class="material-icons light-green-text text-darken-1 medium">visibility</i>
        <h5 class="gray-text text-darken-4">Our Vision</h5>
        <span class="center-align"> NPCD Tanzania vision is To have well-nourished and healthy children including the ones with disability within and outside our communities.</span>
      </div>
    </div>
  </div>
</div>

`

the first image shows the actual code and the second shows the output where the div size are not the same

Answer 1

这可以使用 flex-box css 属性来完成。我已经删除了 container、row 和其他网格类。在结果中，您可以看到 card-panel 都适合，它们具有相同的高度和宽度，但内容不同。

.flexbox {
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
  background: red;
  margin: 10px;
  padding: 20px;
}

body {
  padding: 20px;
}

<div>
  <div class="flexbox">
    <div class="col">
      <div class="card-panel">
        <i class="material-icons green-text medium">eco</i>
        <h5 class="gray-text text-darken-4">Our Mission</h5>
        <p class="center-align ">
          <span>To improve health, functioning and wellbeing of children especially the ones living with disability by creating awareness
            on importance of nutrition and healthy eating.</span> </p>
      </div>
    </div>
    <div class="col">
      <div class="card-panel">
        <i class="material-icons light-green-text text-darken-1 medium">visibility</i>
        <h5 class="gray-text text-darken-4">Our Vision</h5>
        <span class="center-align"> NPCD Tanzania vision is To have well-nourished and healthy children including the ones with disability within and outside our communities.</span>
      </div>
    </div>
  </div>
</div>

Answer 2

Materialize 提供 3 utility classes 用于固定卡片的高度：small、medium & large.

<div class="card small">
    <!-- Card Content -->
</div>

<div class="card medium">
    <!-- Card Content -->
</div>

<div class="card large">
    <!-- Card Content -->
</div>

这些分别将高度固定为 300px、400px 和 500px。

有没有办法让 materialize css 卡片面板在不同的内容大小上具有相同的宽度？

Is there a way to make materialize css card-panel the same width on different content size?

html

css

materialize