div浮动之后排在一行，在把浮动去掉，把div用display设置成inline？
去的浮动设置成行级块元素就不能正常布局了。求解
浮动设置的布局源码
<!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优艾设计网_Photoshop交流:#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>
筱武穆发呆草疏清浅张先生 20小时前
ri优艾设计网_设计百科ght会掉下来是因为left,content,right inline-block后，这三个div之间有了空隙，除掉空隙的办法有很多种，最简单的就是在html中删除div之间空格，其它方法请参考这里
自卑的小怪兽 20小时前 优艾设计网_电脑技术
贴代码，别贴图嘛
杨坚 20小时前优艾设计网_在线设计
因为inline-block产生的容器之间的margin，所以right就掉下来了
加载中,请稍侯......
精彩评论