為什么這個(gè)會(huì)在的元素的下面？

科技 未結(jié) 7 1030
艾豬之歌
艾豬之歌 2023-02-12 09:48

<!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>

效果圖：


我有點(diǎn)不明白為什么粉色的在最下面而且剛好頂部在黃色底部的水平線上。按照我的理解，粉色的應(yīng)該在最右端的上面。求解析?。?！

7條回答
  • vickly
    vickly (樓主)
    2023-02-12 10:08

    1.div默認(rèn)的display值是block。所以每一個(gè)div占據(jù)一行；2.float屬性只能讓你的內(nèi)容在原有位置上左右浮動(dòng)，并不會(huì)網(wǎng)上擠；3.如果想要實(shí)現(xiàn)樓主說的效果，可以給第二個(gè)div加上display:inline實(shí)現(xiàn)并排,或者使用position配合 left,right,top,bottom給div定位；4.樓主發(fā)代碼得排版好，少還好，多就沒人理你了。

提交回復(fù)