我正在尝试语义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;
}
结果如下:
最佳答案
一种解决方案可能是使用"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专家。
可能会有一种更合适的方法来用类浮动元素。
关于html - 语义UI网格列不适应高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56414775/