三列固定宽度居中型布局？

如何实现双列布局和三列布局

1、双列布局（拖动窗口时，窗口左边不动，右边自适应）：左边宽度固定，右边自适应

2、三列布局（两边不动中间动）：两边宽度固定，中间自适应

三栏布局方式两边固定中间自适应的4种方法

1.浮动法：左栏左浮动，右栏右浮动，中间栏用margin，

布局div是left、right、main即左右中或者右左中，布局中main必须在最后，否则右侧布局会掉下来

下面的顺序将会导致右侧的移动到下一列

谷歌浏览器出现了问题：右侧掉了下来

2.绝对定位法：左侧固定于左上，右侧固定于右上，中间用margin撑开，

布局div是left、right、main或left、main、right或者main、left、right均可

3.flex布局：增加父级div.设置为display:flex,中间设置flex:1

4.margin负值法：全部左浮动，中间栏宽度100%,并增加一个子元素，子元素设置margin：0200px空出左右两元素的宽度。左右两栏用负的margin值

正确的效果如下图

《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：

利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。

热门标签