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