ask2

div浮动之后排在一行，在把浮动去掉，把div用display设置成inline-block之后就不 财富值16

2016-10-12 23:06发布

站内问答 /
3880 3 5




去的浮动设置成行级块元素就不能正常布局了。求解
浮动设置的布局源码

<!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>
发送
3条回答
Battle field - 这个人很懒，什么都没留下
1楼 · 2016-10-12 23:42.采纳回答

贴代码，别贴图嘛

bobomao - 这个人很懒，什么都没留下
2楼-- · 2016-10-12 23:48

right会掉下来是因为left,content,right inline-block后，这三个div之间有了空隙，除掉空隙的办法有很多种，最简单的就是在html中删除div之间空格，其它方法请参考这里

恰逢花开 - 这个人很懒，什么都没留下
3楼-- · 2016-10-12 23:33

因为inline-block产生的容器之间的margin，所以right就掉下来了

一周热门 更多>