语义UI网格列不适应高度

时间:2019-06-02 11:56:47

标签: html css semantic-ui semantic-ui-css

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

这是结果: enter image description here

1 个答案:

答案 0 :(得分:0)

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