三栏布局中间自适应总结

时间：2023-04-02 23:43:33 HTML

三栏布局，中间自适应这个经典问题，之前看过很多。今天我将在我的博客中总结一下，以加深我的理解。方法一：左侧浮动，右侧浮动，中间自适应

/div>

注意点：1.

一定要放在末尾*，因为middle先放，会占据文档流的位置，左右浮动只能从第二行开始。2.当浏览器窗口较小时，最右边的元素会被推到下一行。下面附上效果图：方法二：绝对定位方法

注意点：1.因为是绝对定位，中、左、右的位置可以任意排列。2.需要微调中间或两侧的top属性，否则中间和两侧的高度不均，效果如下方法三：浮动+边距负值法（也是称为双飞翼布局法）中左Right注意：1.Middke应该放在最前面，这样可以遮住左右。2.如果left的margin-left设置为-100%，则浮动到第一行的最左边，right的margin-left设置为负的自身宽度，即浮动到第一行的最右边第一行。3、

的边框宽度会影响左框和右框到第一行的浮动位置，因为边框的宽度会被计算在内。比如这个例子，如果不注释掉边框，那么右边框的margin-left如果设置为-300，就不能浮动到第一行。只有-304可以浮动到第一行，加上边框的宽度。4、中间嵌套一个主框，通过主框设置margin-left和margin-right。如果直接设置在浮动中间会有问题，会整体向右偏移margin-left距离。效果图如下：方法四：css3弹性框flex

/div>注意点：1.代码很简洁，只需要在最外层加一个大盒子，设置display等于flex即可。间距可以用边距调整。2.中间的盒子一定要放在中间，顺序。3、当浏览器窗口缩小到小尺寸时，最右边的右框不会被挤压到下一行。效果图如下：总结：这些是常用的布局方式。还有一种圣杯布局方式，原理上和双飞翼类似，但是更加复杂。与之相比，更推荐双飞翼布局方式。灵活的盒子布局方式应该是最简洁实用的，它的优势也比较突出。

上一篇：WAP2.0开发网站案例

下一篇：使用http-proxy代理网络请求

三栏布局中间自适应总结相关文章