鍍金池/ 問答/HTML5  HTML/ inline-block元素?zé)o法放在一行，已設(shè)置font-size:0，初步懷疑

inline-block元素?zé)o法放在一行，已設(shè)置font-size:0，初步懷疑是height:100vh導(dǎo)致

代碼如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        body {
            margin: 0;
        }

        .site-page {
            height: 100vh;
            font-size: 0;
        }

        .site-page .site-nav {
            width: 300px;
            height: 100vh;
            display: inline-block;
            vertical-align: top;
            background: #000;
        }

        .site-page .site-body {
            width: calc(100vw - 330px);
            height: 100vh;
            margin-left: 30px;
            display: inline-block;
            vertical-align: top;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="site-page">
        <div class="site-nav"></div>
        <div class="site-body"></div>
    </div>
</body>

</html>

現(xiàn)狀：

clipboard.png

求解：為什么不在同一行？

回答
編輯回答
孤島

行內(nèi)塊級元素有間隙
方法一 不換行
<div class="site-page">

    <div class="site-nav"></div><div class="site-body"></div>

</div>
如果為了美觀一定要換行 方法二
用注釋連接
<div class="site-page">

    <div class="site-nav"></div><!--
    --><div class="site-body"></div>

</div>
其余方法請自行搜索

2017年1月18日 11:48
編輯回答
瞄小懶

首先說一下與hight：100vh無關(guān)
vw是相對于視窗的寬度，“視窗”的寬度是100vw，而“視窗”是所指為瀏覽器內(nèi)部的可視區(qū)域大小，也就是window.innerWidth，我剛剛在我瀏覽器上測試是1186
如果你將

.site-page .site-nav {
    width：100%;
}

查看第一個盒子的寬度（也就是body的寬度），我這上面是1169，這就說明了100vw并不是body的寬，所以第二個盒子會擠下去。你將第二個盒子的寬度設(shè)為calc(100vw - 347px)，兩個盒子就會在一行。

.site-page .site-body {
       width: calc(100vw - 347px);
       }

這樣的話兩個盒子的寬度加上magin就是body的寬，但不是100vw。
這兩者是不等的。

2017年10月12日 00:09
編輯回答
荒城
.site-page {
    height: 100vh;
    width: 100vw; // 加上這行代碼就好啦
    font-size: 0;
}
2017年4月11日 07:28