Semantic UI Grid Column не адаптируется к высоте - PullRequest
Новая
       46

Semantic UI Grid Column не адаптируется к высоте

1 голос
/ 02 июня 2019

Я пробую семантический интерфейс.Я хочу сделать несколько карточек админ-панели со статистикой, но у меня проблема в том, что если я изменю размер шрифта числа внутри столбца, он переполняет сегмент ... То же самое с карточками.

Это моеhtml: 

<div class="ui grid container">
  <div class="four wide column">
    <div class="ui segment">
      <div class="ui container stat-number">12</div>
    </div>
  </div>
</div>

Css, который принадлежит HTML: 

.stat-number {
  font-size: 50px;
  float: left;
}

.stat-icon {
  float: left;
}

И вот результат: enter image description here

1 Ответ

0 голосов
/ 02 июня 2019

Одним из решений может быть использование класса «очистки» . 

.stat-number {
  font-size: 50px;
  float: left;
}

.stat-icon {
  float: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

<div class="ui grid container">
  <div class="four wide column">
    <div class="ui segment clearing">
      <div class="stat-number">12</div>
      <div class="stat-icon">*</div>
    </div>
  </div>
</div>

Я не специалист по семантическому интерфейсу.
Может быть более подходящий способ использовать элементы с классами.

...