去的浮动设置成行级块元素就不能正常布局了。求解
浮动设置的布局源码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0; padding:0; } .wrapper {width:980px; margin:20px auto 0; border:1px solid #ccc; } .header {height:74px; background:#A94E38; text-align:center;line-height:74px;} .left {width:200px; background:#eee;height:400px;} .right {width:200px; background:#eee;height:400px;} .content {width:580px;height:400px; background:green; float:left; } .left {float:left;} .right{float:left;} .footer {height:50px; background:#7082C2;text-align:center;line-height:50px; clear:both; } </style> </head> <body> <div class="wrapper"> <div class="header"> header </div> <div class="main"> <div class="left"> left </div> <div class="content"> content </div> <div class="right"> right </div> </div> <div class="footer"> footer </div> </div> </body> </html>
去掉浮动设置成inline-block后的代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0; padding:0; } .wrapper {width:980px; margin:20px auto 0; border:1px solid #ccc; } .header {height:74px; background:#A94E38; text-align:center;line-height:74px;} .left {width:200px; background:#eee;height:400px;} .right {width:200px; background:#eee;height:400px;} .content {width:580px;height:400px; background:green; display:inline-block; } .left {display:inline-block;} .right{display:inline-block;} .footer {height:50px; background:#7082C2;text-align:center;line-height:50px; } </style> </head> <body> <div class="wrapper"> <div class="header"> header </div> <div class="main"> <div class="left"> left </div> <div class="content"> content </div> <div class="right"> right </div> </div> <div class="footer"> footer </div> </div> </body> </html>
付费偷看金额在0.1-10元之间
贴代码,别贴图嘛
因为inline-block产生的容器之间的margin,所以right就掉下来了
right会掉下来是因为left,content,right inline-block后,这三个div之间有了空隙,除掉空隙的办法有很多种,最简单的就是在html中删除div之间空格,其它方法请参考这里
一周热门 更多>