可變高度處的CSS浮動(dòng)Div我有一個(gè)100 px寬度的無(wú)限個(gè)div，它可以容納一個(gè)250 px寬度的父級(jí)。無(wú)論高度如何，我都需要在行中顯示div，如圖像所示。我試過(guò)解決這個(gè)問(wèn)題，但是div的高度似乎把它搞砸了。我非常感謝你的幫助。謝謝：) <style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>這是小提琴以下是我使用javascript所做的和取得的成就https://jsfiddle.net/8o0nwft9/
3 回答
猛跑小豬
TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊
.box:nth-child(odd){
clear:both;}nth-child(3n+1)
catspeake
TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
left.right.
#holder{
width:200px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
float:right;
}
.four{
background-color:#FF0;
float:right;
}
.left{float:left;}
.right{float:right;}
<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box four right">4</div>
<div class="box three right">3</div>
</div>
</body>
添加回答
舉報(bào)
0/150
提交
取消