2017-10-16 65 views
0

我是一位熱情的新編碼員,自從我的Geocities日子以來,他一直沒有建立網站。我的flex行顯示爲一列,它讓我發瘋

我在論壇皮膚上工作,我想在兩個信息框上方的水平行顯示工作人員圖標。

我是新來的使用flexboxes,它給我適合。我無法弄清楚爲什麼我的行顯示爲一列。代碼還有其他問題,但我可以在排除flex行的情況後將它們散列出來。

我在做什麼錯?有沒有更好的方法來獲得我期待的結果?

Codepen是在這裏:https://codepen.io/anon/pen/boQgzV

相關CSS是在這裏:

#td-stfcontnr { 
display: flex; 
flex-direction: row; 
margin: 0 auto; 
width: 100%; 
height: 100%; 
} 

.td-staff1 { 
width: 350px; 
height: 116px; 
position: relative; 
} 

.td-staff2 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff3 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff4 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

.td-staff5 { 
width: 350px; 
height: 116px; 
position: relative; 
flex-basis: 200px; 
} 

下面是相關的HTML代碼:

<div class='td-banner'> 
<div class='tdbncntnr'> 
<div class='overimg'><img src='http://placehold.it/980x525'></div> 
<div class='textblockhold'> 
<div id='td-stfcontnr'> 
<div class='td-staff1'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div> 
<div class='td-staff2'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff3'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff4'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div> 
<div class='td-staff5'> 
<div class='td-stf'> 
<div class='td-stf-img'> 
<span class='td-imgrsz'><img src='placehold.it/200'></span></div> 
<div class='td-stf-txt'><a href="STAFFER"></a></div></div></div></div> 

編輯澄清,我試圖讓水平行而不是垂直行

+0

是'#TD-stfcontnr'應該是'.tdbncntnr'?在標記中我找不到任何帶有'td-stfcontnr'的元素 – UncaughtTypeError

+1

您的演示和代碼不會重現您所描述的問題。 –

+0

@UncaughtTypeError:oops,只是修復了它 –

回答

0

請參閱MDN flexbox overview瞭解如何使用flexbox。

flexbox容器可以用display: flex;來聲明,直接的孩子將繼承這個顯示爲flex兒童。瞭解軸如何工作很重要。您可以構造一個簡單的Flexbox的一行:

.container { 
    display: flex; 
    flex-flow: row nowrap; // Row alignment, does not overflow to second row 
    justify-content: start; // Determines content alignment along main axis (horizontal) 
    align-content: start; // Determines row alignment/distribution along cross axis (vertical) 
    align-items: start; // Determines content alignment along cross axis (vertical) 
} 

.container > * { 
    display: flex; 
    flex: auto 1 1; // flex-basis auto, grow & shrink 
    width: 50px; height: 50px; 
} 
+0

當使用僅由Firefox支持的屬性值('start')時,應該提及這一點。我也不明白爲什麼不使用適當的Flexbox,所以我建議你仔細閱讀 – LGSon