2016-11-14 64 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