語義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專家。
可能會有一種更合適的方法來用類浮動元素。