inline-block 实现三列布局

一、布局结构标准三列页面结构顶部导航 (10%) 左窄栏 中间主内容 右窄栏 (80%) 底部页脚 (10%)左右侧边栏各占固定百分比中间内容区是页面主体上下导航、页脚合计占页面高度 20%中间内容区占 80%二、inline-block 实现原理元素特性display:inline-block融合两种元素属性继承块级元素可自定义宽、高、内外边距继承行内元素多个元素可以横向并排摆放解决 div 默认独占一行的问题。三、核心与解决问题根源HTML 代码里标签之间的换行、空格会被浏览器渲染成空白间隙三个并排盒子总宽度 左 10% 中间 80% 右 10% 空白间隙 100%盒子会自动换行掉落布局错乱。适配方案缩减中间内容宽度左10% 中间79% 右10% 99%预留 1% 空间抵消空白间隙避免换行。四、代码与结果!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8style*{margin:0;padding:0;}.header{width:100%;height:10vh;background:#ccc;}.wrap{font-size:0;width:100%;height:80vh;}.left,.main,.right{display:inline-block;height:100%;font-size:16px;}.left{width:10%;background:#aaf;}.main{width:79%;background:#afa;}.right{width:10%;background:#faa;}.footer{width:100%;height:10vh;background:#ccc;}/style/headbodydiv classheader顶部导航/divdiv classwrapdiv classleft左侧边栏/divdiv classmain中间主体内容/divdiv classright右侧边栏/div/divdiv classfooter底部页脚/div/body/html