假设高度已知，左右宽度固定，实现三栏布局的5种方法

focusj 发布于2019-08-30 15:54 / 1064人阅读

摘要：五种方法的优缺点浮动兼容性好，如果对兼容性有明确的要求使用浮动应该满足需求，但是一定要处理好与周边元素的关系，因为一不注意浮动就可能造成页面布局混乱等问题，不过解决浮动带来的副作用方法也不少这里我们不做讨论。

第一种方法 float

第一种解决方案基本上没有什么难度，平时应该也会用到很多！

第二种方法：absolute

第二种方法也是轻松实现效果。

第三种方法：flexbox

第四种方法：表格布局

table方案同样实现，只是现在我们可能已经很少使用表格布局了。页面渲染性能也要差一点！

第五种方法：网格布局grid

网格布局方法也实现了，CSS3的网格布局有点类似于bootstrap的栅格化布局，都是以网格的方式来划分元素所占的区块。

问题没有结束，我们继续讨论。五种解决方案哪一个更好呢？笔者一直认为技术没有好坏之分，完全取决于你用在什么地方。

五种方法的优缺点：

浮动：兼容性好，如果对兼容性有明确的要求使用浮动应该满足需求，但是一定要处理好与周边元素的关系，因为一不注意浮动就可能造成页面布局混乱等问题，不过解决浮动带来的副作用方法也不少这里我们不做讨论。

绝对定位：简单直接，但是会使父元素脱离正常文档流里面的子元素也会跟着脱离。

flex:目前看来比较完美，不过现在稍微完美一点的技术都存在或多或少的兼容性问题，同样这个样式IE8下是不支持的！（IE呀！）

表格布局：表格布局虽然没有什么大的问题，但是在我们要细化结构的时候会显得很繁琐，同时表格布局三个单元格的高度会一起变动也不利于我们进行布局。

网格布局：代码优美简洁，不过还是兼容性问题。但是未来是美好的！

GPU云服务器云服务器三栏布局三种实现方法数据分析方法5种 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117097.html

假设高度已知，左右宽度固定，实现三栏布局的5种方法

摘要：五种方法的优缺点浮动兼容性好，如果对兼容性有明确的要求使用浮动应该满足需求，但是一定要处理好与周边元素的关系，因为一不注意浮动就可能造成页面布局混乱等问题，不过解决浮动带来的副作用方法也不少这里我们不做讨论。第一种方法 float *{ padding:0; margin:0; } .big div{ heig...

2501207950 2019-08-02 13:56 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0
中间自适应布局的5种解法

摘要：前言在做页面时，我们往往会碰到页面布局相关的内容，面试时也经常会被问到，那么今天我就来总结一下关于页面布局的内容。问题如何实现三栏布局高度固定，左中右的结构假设高度已知，请写出三栏布局，其中左右宽度均为，中间自适应。前言在做页面时，我们往往会碰到页面布局相关的内容，面试时也经常会被问到，那么今天我就来总结一下关于页面布局的内容。问题：如何实现三栏布局（高度固定，左中右的结构）...

keithxiaoy 2019-08-30 15:55 评论0 收藏0