三個div并列為什么不行
關鍵代碼:
.box1{
? ? width:960px;
? ? height:300px;
? ? background-color:#CFF;
}
.box2{
? ? width:740px;
? ? height:300px;
? ? background-color:#C9F;
? ? float:left;
}
.box3{
? ? width:210px;
? ? background-color:#FCF;
? ? height:300px;
float:right;
}
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div> ?
結果為:藍色在第一行,紫色和粉色在第二行
但如果:
.box1{
? ? width:210px;
? ? background-color:#FCF;
? ? height:300px;
float:right;
}
.box2{
? ? width:740px;
? ? height:300px;
? ? background-color:#C9F;
? ? float:left;
}
.box3{
? ? width:960px;
? ? height:300px;
? ? background-color:#CFF;
}
就好了!也就是說第一個盒子一定要設置為float才行(視屏里也是第一個盒子設置為float),為什么?
2018-06-06
div如果不漂浮就會獨占一行,
你第一個例子:第一個div沒有漂浮 ?后面的div不管漂不漂浮 都只能在第一個div的下一行排列
你第二個例子:前連個div漂浮了 ?只要寬度夠 就會顯示在一行上 相當于從一樓到了二樓 ?第三個div雖然沒有漂浮 但是還是會顯示在第一行 也就是會去一樓 ? 如果前面兩個div有重疊的地方 第三個div在下層?