0
的jsfiddle:https://jsfiddle.net/bnfsnm40/
標記:
<div class="card">
<div class="card-header">Download stats</div>
<div class="card-block">
<div class="statistics">
<span class="day statistic">
<div class="count">100</div>
<div class="rank">10th</div>
<div class="icon text-success">
<i class="fa fa-line-chart "></i>
+4
</div>
</span>
我想要做什麼:
count
,rank
和icon
應該是display: block
所以他們在彼此之下。 如果我設置他們顯示:塊他們根本不像我期望的正常塊元素會採取行動,他們仍然坐在彼此相鄰,而不是從上到下。
.card-block {
.statistics {
display: flex;
justify-content: space-around;
.statistic {
height: 65px;
display: flex;
.count {
display: block;
width: 100%;
}
.rank {
display: block;
width: 100%;
}
首先 - 從不剝離結束標籤。您的'flexbox'設置有改進的餘地。但是,您可以嘗試將它們設置爲'inline-block',寬度爲'100%'。 – snkv
@Sqnkov我是新來的,今天學習flexbox。請告訴我要改進什麼。 –
@Sqnkov'inline-block'不會改變任何行爲 –