当前位置： 移动技术网 > IT编程>网页制作>CSS > 关于两个DIV之间的空白字符

关于两个DIV之间的空白字符

2019年06月23日  | 移动技术网IT编程  | 我要评论

首先！！！！这个问题应该是去面试前端会经常问到的问题！！！

如，下面这个例子：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1024px;
            height: 2000px;
            margin: 0 auto;
        }
        .container > div {
            display: inline-block;
        }
        .left {
            width: 80%;
            height: 100%;
            background-color: red;
        }
        .right {
            width: 20%;
            height: 100%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。

效果如下图所示：

想要解决这种现象有两个办法：

  1. 将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦） 
    <div class="container">
        <div class="left"></div><div class="right"></div>
    </div>

     

  2. 给父容器.container 加上 font-size:0: 
    <!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1024px;
            height: 2000px;
            margin: 0 auto;
            font-size: 0;
        }
        .container > div {
            display: inline-block;
        }
        .left {
            width: 80%;
            height: 100%;
            background-color: red;
        }
        .right {
            width: 20%;
            height: 100%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>


 效果最终显示：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网