我是一位熱情的新編碼員,自從我的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>
編輯澄清,我試圖讓水平行而不是垂直行
是'#TD-stfcontnr'應該是'.tdbncntnr'?在標記中我找不到任何帶有'td-stfcontnr'的元素 – UncaughtTypeError
您的演示和代碼不會重現您所描述的問題。 –
@UncaughtTypeError:oops,只是修復了它 –