问题：假设容器的高度默认100px，其中左栏、右栏的宽度各为300px，中间的宽度自适应的三栏布局如何写？

左右固定，中间自适应

中间栏放在文档流前面，保证优先加载。

方法1：浮动

方法2：绝对定位。

方法3：flexbox。移动开发里经常用到。

方法4：表格布局 table。已经淘汰

方法5：网格布局 grid

方法6：双飞翼布局

方法7：圣杯布局

HTML代码：

//注意元素次序

CSS 代码：

//CSS reset body,html { height:100%; padding: 0; margin: 0 } //左栏左浮动 .left { float: left; width: 300px; height: 100px; background: red; } //中间自适应 .main { background: blue; height: 100px; margin:0px 200px 0px 100px; } //右栏右浮动 .right { background: red; width: 300px; float: right; height: 100px; }

这种方式代码足够简洁与高效，也容易理解

HTML 代码

CSS 代码

.layout.absolute .left-center-right { position: relative; } .layout.absolute .left { position: absolute; left: 0; width: 300px; background: red; } /* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */ .layout.absolute .center { position: absolute; left: 300px; right: 300px; background: green; } .layout.absolute .right { position: absolute; right: 0; width: 300px; background: blue; }

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

将中间盒子放置html最开始，保证优先加载

使用flex order属性决定三个盒子顺序，左，中，右

左盒子和右盒子固定宽度，中间盒子flex:1

HTML 代码：

CSS 代码：

HTML 代码：

CSS 代码：

HTML 代码

CSS 代码：

.container { min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽 } .left { float: left; width: 300px; height: 100px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 100px; background: yellow; } .center .inner { margin: 0 300px; //新增部分 } .right { float: left; width: 300px; height: 100px; background: blue; margin-left: -200px; }

HTML 代码

CSS 代码：

.container { padding-left: 300px;//为左右栏腾出空间 padding-right: 300px; } .left { float: left; width: 300px; height: 100px; background: red; margin-left: -100%; position: relative; left: -300px; } .center { float: left; width: 100%; height: 100px; background: yellow; } .right { float: left; width: 300px; height: 100px; background: blue; margin-left: -300px; position: relative; right: -300px; }

相关解释如下：

(1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去

(2)把左层margin负300后，发现left上去了，因为负到出窗口没位置了，只能往上挪

(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位

(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果

圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

HTML web前端 容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。