为什么这个会在的元素的下面? 财富值92

2016-10-26 13:51发布

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         .one{width: 250px;               height: 250px;            background: red;            float: left;}          .tow{     width: 300px;     height: 200px;     background:yellow;}         .three{         width: 200px;         height: 200px;         background: pink;         float: right;        }     </style> </head> <body>     <div class="one"></div>   <div class="tow"></div>   <div class="three"></div>     </body> </html> 

效果图:


我有点不明白为什么粉色的在最下面而且刚好顶部在黄色底部的水平线上。按照我的理解,粉色的应该在最右端的上面。求解析!!!

7条回答
小米哥哥2 - 这个人很懒,什么都没留下
1楼 · 2016-10-26 14:26.采纳回答

哈哈哈~~~

1.div默认的display值是block。所以每一个div占据一行;
2.float属性只能让你的内容在原有位置上左右浮动,并不会网上挤;
3.如果想要实现楼主说的效果,可以给第二个div加上display:inline实现并排,或者使用position配合 left,right,top,bottom给div定位;
4.楼主发代码得排版好,少还好,多就没人理你了。

你肯定会问那为什么第一个红色的div就可以在第一行,那是因为html代码中红色的div出现在了不浮动的div前面,如果把不浮动的第一个div写在最前面,两个浮动的div都会出现在下面的第二行。

因为没有浮动的块元素自己就占据了一行了啊,浮动的元素在该行上就没有空间了,所以就被挤下去了第二行了。

另外two是这样写的不是tow。。。

tow div是块级元素,占了一整行 添加display: inline-block; 可以达到你想要的效果

因为你tow的那个div就占了一行,所以右浮动的那个div就会被挤到下面去了

一周热门 更多>