div浮动之后排在一行，在把浮动去掉，把div用display设置成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; 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>

css html

阅读 12k

5 个回答

✓ 已被采纳

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

<div class="inline-block"></div><div class="inline-block"></div>
    <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>

chrisliu

441410

发布于
2016-11-28

兄弟，你这个问题确实是不同inlineblock容器之间产生的空隙，但是这个空隙不是@游泳的鱼提到的margin，这个可以通过浏览器调试证明。关于这个空隙，以及如何解决看@joyhu 推荐的链接。说白了就是font-size设为0.

我把你的例子改了两行代码，此时inlineblock容器又不能在一行了，思考一下吧，哈哈

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>        
    <style type="text/css">
        *{margin:0; padding:0; font-size: 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-color:pink;height:400px; display:inline-block;}
        .right {width:200px; background-color:red;height:400px; display:inline-block;}
        .content {width:580px;height:400px; background:green; 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">
            </div>
            <div class="right">
            </div>
        </div>    
        <div class="footer">
            footer
        </div>
    </div>
</body>
</html>