语义 UI 网格列不适应高度

Question

我正在尝试语义 UI。我想制作一些带有统计信息的管理面板卡，但我遇到了问题，如果我更改列内数字的字体大小，它会溢出该段... 与卡片相同。

这是我的 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>

属于html的Css：

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

.stat-icon {
  float: left;
}

这是结果：

Answer 1

一种解决方案可能是使用 "clearing" class。

.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>

我不是语义专家UI。
可能有更合适的方法来浮动元素类.

语义 UI 网格列不适应高度

Semantic UI Grid Column not adapting height

html

css

semantic-ui

semantic-ui-css