为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

泛舟湖上清波郎朗 2019-05-12 15:35:56
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测试均如此
查看完整描述

2 回答

?
千巷猫影

TA贡献1829条经验 获得超7个赞

1
2
                            
查看完整回答
反对 回复 2019-05-12
?
慕村225694

TA贡献1880条经验 获得超4个赞

块级元素都是有内外边距的。如果你不手动调没。他就会存在。
就像楼上写的那样调没就好了。
也可以引用一下初始化css,minireset.css
                            
查看完整回答
反对 回复 2019-05-12
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信