為什么給left設置float:left;right塊沒有上來呢?
#left{width:800px; height:200px; background:#999; float:left;}
#right{width:120px; height:600px; background:#CCF;}
body>
<div id="wrap">wrap
? ? <div id="header">header</div>
? ? ? ? <div id="mainbody">
? ? ? ? <div id="left"></div>
? ? ? ? ? ? <div id="right"></div>
? ? ? ? </div>
? ? ? ? <div id="footer">footer</div>
? ? </div>
2016-01-14
并不是沒有上來,而是被遮蓋住了。你看不到而已。你把right的width設置成比left大一些可以看到其實它是被浮動元素遮住了。所以把right設置一個浮動就上來了。http://blog.sina.com.cn/s/blog_5f90da9b01016cmo.html把這篇文章好好看看就明白了。
2016-01-11
寬度不夠
2016-01-11
高度問題。
在標準流文檔中,設置為position:float的box只有在高度大于后面的box時,后面的box才會上來。
Ex.
<head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>無標題文檔</title> <style?type="text/css"> *{margin:0;?padding:0;} #wrap{width:1000px;?background:red;} #left{width:100px;?height:600px;?background:#999;?float:left;} #right{width:200px;?height:600px;?background:#CCF;?} </style> </head> <body> <div?id="wrap">wrap ????<div?id="header">header</div> ????<div?id="mainbody"> ????????<div?id="left"></div> ????????<div?id="right"></div> ????????<div?id="footer">footer</div> ????</div> </div> </body>