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测试均如此
2 回答
浮云间
TA贡献1829条经验 获得超4个赞
<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>
- 2 回答
- 0 关注
- 608 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消