为什么这个会在的元素的下面？ - whatsns开源问答社区

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

2016-10-26 13:51发布

2521 7

<!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.采纳回答

哈哈哈~~~

蜗牛食堂 - 江浙沪园艺官网：jzhgardening.com 教您养好花的网站

2楼-- · 2016-10-26 14:14

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

aaaaaaa吆 - 这个人很懒，什么都没留下

3楼-- · 2016-10-26 14:18

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

y南洋 - 这个人很懒，什么都没留下

4楼-- · 2016-10-26 14:09

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

小米哥哥2 - 这个人很懒，什么都没留下

5楼-- · 2016-10-26 14:13

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

赞儒 - 这个人很懒，什么都没留下

6楼-- · 2016-10-26 14:25

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

蜗牛食堂 - 江浙沪园艺官网：jzhgardening.com 教您养好花的网站

7楼-- · 2016-10-26 14:25

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

一周热门更多>

相关问题