三个div并列为什么不行
qq_滴滴滴滴滴_2
2018-06-06 11:01
关键代码：
.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），为什么？
1回答
-
- 陈坚泓
- 2018-06-06 19:27:11
div如果不漂浮就会独占一行，
你第一个例子：第一个div没有漂浮 后面的div不管漂不漂浮 都只能在第一个div的下一行排列
你第二个例子：前连个div漂浮了 只要宽度够 就会显示在一行上 相当于从一楼到了二楼 第三个div虽然没有漂浮 但是还是会显示在第一行 也就是会去一楼 如果前面两个div有重叠的地方 第三个div在下层
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题