语义 UI 网格列不适应高度答案

【问题标题】：Semantic UI Grid Column not adapting height语义 UI 网格列不适应高度
【发布时间】：2019-10-18 06:22:40
【问题描述】：

我正在尝试语义 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;
}

结果如下：

【问题讨论】：

浮动 .stat-number 似乎会将其从正常的文档流中移除，因此它不会为其父级贡献任何高度。
好吧，你是对的。如果我删除浮动，它适合在段内。但是，如果我想在一个段内并排放置 div，该怎么办？
.stat-icon 元素是什么样的？
通常它应该是浮动的，但我们可以看到它不能......里面会有一个字体很棒的svg

标签： html css semantic-ui semantic-ui-css

【解决方案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 方面的专家。
可能有一种更合适的方式来使用类浮动元素。

【讨论】：