0
我遇到了一個柔性項目的問題。柔性盒內的跨度位置
我試圖定位我的flex div的2 spans
,以使其中一個高於另一個,但它看起來像flex
的屬性強制它們彼此相鄰。
Here is what I'm looking to do (the date element)
,這裏是我有:
#til-container #til-header #til-date-container {
\t display: flex;
\t align-items: center;
\t position: absolute;
\t top: 30px;
\t margin: auto;
\t width: 60px;
\t height: 60px;
\t border-radius: 50%;
\t border: 1px solid #CCC;
\t background: white;
}
#til-container #til-header #til-date-container #til-date {
\t display: flex;
\t align-items: center;
\t position: relative;
\t margin: auto;
\t width: 52px;
\t height: 52px;
\t border-radius: 50%;
\t background: #d24949;
\t color: #FFF;
\t font-family: 'Lato', sans-serif;
\t text-transform: uppercase;
\t font-weight: 900;
\t text-align: center;
}
#til-container #til-header #til-date-container #til-day {
\t font-size: 20px;
}
#til-container #til-header #til-date-container #til-month {
\t font-size: 10px;
}
<div id="til-container">
\t
\t <div id="til-header">
\t \t <div id="til-date-container">
\t \t \t <div id="til-date">
\t \t \t \t <span id="til-day">25</span>
\t \t \t \t <br/>
\t \t \t \t <span id="til-month">dec</span>
\t \t \t </div>
\t \t </div>
\t </div>
\t
</div>
我已經試過幾件事情,例如已經顯示跨度爲塊,這樣他們採取的全寬容器,並強制下一個跨度位置低於第一個,但這是行不通的。有任何想法嗎 ?
謝謝這正是我想做的事。我已經調整了一下CSS來平滑一點,然後從HTML中刪除
,這是完美的!謝謝。 – eloism