一个简单的两栏布局下，为另一栏预留的width需要比实际宽度大的问题
html结构：
css代码：*{box-sizing:border-box;}#left,#right{display:inline-block;vertical-align:top;}#left{width:calc(100%-205px);/*don'tknowwhyadditional5px?*/}#right{width:200px;}demo：https://codepen.io/anon/pen/N...一个简单的两栏布局，使用calc()动态计算左边栏的width来为右边栏预留空间。按照我的理解，#right是200px，中间没有其他内容，左栏width应该calc(100%-200px)就足够了，但是实际测试发现，右栏会被挤到下一行，而至少需要calc(100%-205px)才能保证两栏在同一水平线，多出来的5px在哪里被占据了？在chrome、IE11测试均如此
泛舟湖上清波郎朗浏览 352回答 2
2回答
-
千巷猫影
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'tknowwhyadditional5px?*/}#right{width:200px;}12 -
慕村225694
块级元素都是有内外边距的。如果你不手动调没。他就会存在。就像楼上写的那样调没就好了。也可以引用一下初始化css,minireset.css
随时随地看视频慕课网APP
相关分类
JavaScript