一个简单的两栏布局下，为另一栏预留的width需要比实际宽度大的问题

html结构：

<div id="left"></div>
<div id="right"></div>

css代码：

* {
    box-sizing: border-box;
}
#left, #right {
    display: inline-block;
    vertical-align: top;
}
#left {
    width: calc(100% - 205px); 
    /* don't know why additional 5px? */
}
#right {
    width: 200px;
}

demo：https://codepen.io/anon/pen/N...

一个简单的两栏布局，使用calc()动态计算左边栏的width来为右边栏预留空间。

按照我的理解，#right是200px，中间没有其他内容，左栏width应该calc(100% - 200px)就足够了，但是实际测试发现，右栏会被挤到下一行，而至少需要calc(100% - 205px)才能保证两栏在同一水平线，多出来的5px在哪里被占据了？

在chrome、IE11测试均如此

html css

阅读 1.7k

2 个回答

得票最新

zzgzzg00

3.7k21420

发布于
2018-07-21

✓ 已被采纳

<style>
    body{
        font-size: 0px;
    }
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    #left, #right {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
    }
    #left {
        width: calc(100% - 200px);
        /* don't know why additional 5px? */
    }
    #right {
        width: 200px;
    }
</style>
</head>
<body>
    <div id="left">1</div>
    <div id="right">2</div>
</body>