三栏式布局

最新推荐文章于 2023-03-28 17:26:55 发布

cha_chenhua

最新推荐文章于 2023-03-28 17:26:55 发布

阅读量233

点赞数

文章标签：布局三栏式双飞翼布局圣杯布局弹性布局

本文链接：https://blog.csdn.net/cha_chenhua/article/details/78628322

版权

左右两边固定宽度200px，中间自适应！

外层元素设置宽度未100%，利用 position : absolute; 使左右两边固定宽度200px、高度和位置，中间栏给定高度，宽度继承自父元素100%，但左右margin值要给定大于200px的值！

优点：简单实用，并且主要内容可以优先加载；主体三个div不分顺序。

缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

外层元素设置为容器 display : flex; 左右两栏设置不放大 flex-grow:0; 可缩放 flex-shrink:1 ，固定的 flex-basis:200px ,简写 flex:0 1 200px;；中间栏 flex:1 1 auto，可放大！

优点：简单实用。

缺点：需要考虑浏览器的兼容性，主体三个div一定要按照左中右顺序。

左右栏给定宽度高度，并分别向左、向右浮动；中间栏给定margin值的左右距离大于200px，并给定高度（必须）。

优点：代码简洁高效。

缺点：主体三个div，中间栏必须放在最后；中间栏注意不能使用clear:both; ；主要内容无法最先加载，当页面内容较多时会影响用户体验。

三栏全浮动，将左侧栏设置 margin-left:-100%; ，将右侧栏设置 margin-left:-200px; 把左右两栏放到指定位置；中间栏的外层元素width:100% ，在嵌套一个内层元素，设置主要内容的高度与左右间距（大于200px）。

优点：三栏相互关联，具有一定抗性——布局不受内部影响；主要内容可以优先加载。

缺点：主体三个div，中间栏必须放在第一位上；理解困难；出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

三栏全浮动，利用margin负值布局（类似于双飞翼布局），把左右两栏放到指定位置；在最外层容器上加样式 margin:0 220px; 使整个布局向中间压缩，再利用 position:relative; 使左右两栏分别向左、向右移动定位，让出中间栏被压住的部分。

优点：与双飞翼布局相似，三栏关联，具有一定抗性；主要内容可以优先加载；相对于双飞翼来说，HTML代码相对简单。

缺点：主体三个div，中间栏必须放在第一位上；样式定义较为复杂；问题与双飞翼布局相似。

左右栏给定宽度高度，并分别向左、向右浮动；并给左右两栏分别设置右边距、左边距；中间栏给定高度，设置overflow:hidden; 。

优点：与流式布局相似，代码简洁高效。

缺点：主体三个div，中间栏必须放在最后；与流式布局相似，主要内容无法最先加载，当页面内容较多时会影响用户体验。

将最外层容器 display:table; ，主体三个div均设置其 display:table-cell; ，分别设置左右栏的宽度高度即可。

优点：代码简单，容易理解。

缺点：主体三个div一定要按照左中右顺序；无法设置栏间距（这里要想设置栏间距，建议可以在中间栏外包一层div，外层div设置属性 display:table-cell ，再设置内层的margin值与具体高度）

关注