Есть ли способ сделать материализованную css карточную панель одинаковой ширины при разном размере контента? - PullRequest
Новая
       8

Есть ли способ сделать материализованную css карточную панель одинаковой ширины при разном размере контента?

1 голос
/ 18 июня 2020 
<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>

`

первое изображение показывает фактический код, а второе показывает результат, где размер div не тот же

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Materialize предоставляет 3 служебных класса для фиксации высоты карт: small, medium & large. 

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

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

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

Они фиксируют высоту на 300 пикселей, 400 пикселей и 500 пикселей соответственно.

0 голосов
/ 18 июня 2020

Это можно сделать с помощью свойства 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>
...