猿问

一个简单的两栏布局下，为另一栏预留的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测试均如此


慕田峪4524236
浏览 609回答 2
2回答

浮云间

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

慕沐林林

块级元素都是有内外边距的。如果你不手动调没。他就会存在。就像楼上写的那样调没就好了。也可以引用一下初始化css,minireset.css
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答