關於兩個DIV之間的空白字符

本文轉載自查看原文 2019-06-23 15:32 672

首先！！！！這個問題應該是去面試前端會經常問到的問題！！！

如，下面這個例子：

<!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。

效果如下圖所示：

想要解決這種現象有兩個辦法：

將兩個div如下放置：（注意！！！雖然效果實現了，但是這樣治標不治本，當自動格式化代碼時又會回到原來的樣子，顯得麻煩）
```
<div class="container">
        <div class="left"></div><div class="right"></div>
    </div>
```

給父容器.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>

效果最終顯示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 各空白字符說明空白字符 python中的空白字符 mysql 去除前后空白字符 linux中的"空白字符" 正則1-999之間的整數；正整數; 數字；非空白字符; String trim() ,去除當前字符串兩邊的空白字符兩個div之間有空隙 c#處理空白字符 Mysql utf8 替換空白字符