[英]Semantic UI Grid Column not adapting height
Im trying out semantic UI. 我正在尝试语义UI。 I want to make some admin Panel cards with stats but I have the problem, that if I change the font size of the number inside the column, it overflows the segment... Same with cards.
我想用统计数据制作一些管理面板卡,但问题是,如果我更改列内数字的字体大小,则会溢出该段...与卡相同。
This is my html: 这是我的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>
The Css which belongs to the html: 属于html的CSS:
.stat-number { font-size: 50px; float: left; } .stat-icon { float: left; }
One solution might be to use the "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>
I am no expert in Semantic UI. 我不是语义UI专家。
There might be a more appropriate way to float elements with classes. 可能会有一种更合适的方法来用类浮动元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.