语义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

一种解决方案可能是使用“清除”类 。

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