2016-11-14 52 views
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>

我已经试过几件事情,例如已经显示跨度为块,这样他们采取的全宽容器,并强制下一个跨度位置低于第一个,但这是行不通的。有任何想法吗 ?

回答

3

使用Flex,您可以添加到#til-date

flex-direction: column; 
justify-content: center; 

我编辑您的片段,将其添加:

#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; 
 

 
    /* Added */ 
 
    flex-direction: column; 
 
    justify-content: 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>

+0

谢谢这正是我想做的事。我已经调整了一下CSS来平滑一点,然后从HTML中删除
,这是完美的!谢谢。 – eloism