一个简单的两栏布局下，为另一栏预留的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> 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> -
慕沐林林
块级元素都是有内外边距的。如果你不手动调没。他就会存在。就像楼上写的那样调没就好了。也可以引用一下初始化css,minireset.css
随时随地看视频慕课网APP
Html/CSS