Im trying out semantic 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:
<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:
.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.
There might be a more appropriate way to float elements with classes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.