三栏全自适应自适应html5css3面试官若何实现三栏结构中央自顺应

如何实现三栏布局中间自适应？这也是在前端口试官常常会问到的，当你被问到这个它的时候，你的脑筋里该当想到什么？给你3秒钟的韶光...那一定是最最经典的圣杯、双飞翼布局，这便是实现这个问题最优雅的办法。

既然是三栏布局，我们先创建3个容器：left + middle + right

接下来便是实现三栏布局的效果，我们先聊一个最大略最好想的方法，利用弹性

三栏全自适应自适应html5css3面试官若何实现三栏结构中央自顺应 PHP

先给left和right都设置200px的宽度，再给它们的父容器container设置属性display: flex;这样这三个容器就会自动去到同一行，再给middle容器设置flex：1，这样中间这个容器的宽度就能一贯得到全部宽度减去旁边两边容器宽度，这个宽度会随着窗口的大小而变革，代码和效果图如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> { margin: 0; padding: 0; } div{ height: 100px; } .container{ display: flex; } .left,.right{ width: 200px; background: #66a4bd; } .middle{ flex: 1; background: gray; } </style></head><body> <div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div></body></html>

这个方法看起来是不是很大略，没错它真的非常大略，都不须要动脑筋，简大略单两行代码就能搞定。
but！
它存在一个问题，这个方法是先加载左边容器的，中间容器加载。
不知道大家在上网的时候有没有创造过，有些页面旁边两边的都是广告，主要内容都在中间，那么当我们如果利用这个方法来布局的时候，最先出来的是广告，那你乐意吗？我们肯定是想先看到中间的紧张内容，两边广告什么时候涌现谁在意呢？

所以为了优化这个问题，就涌现了经典的圣杯和双飞翼布局，它们的目的便是为了在HTML构造上，中间栏在最前面担保了最先渲染中间提升性能

圣杯布局

既然要担保中间栏最先加载，那就要把middle容器写在前面

<body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div></body>

css样式还是先给旁边容器宽度200px，高度都一样，给个背景色便于区分：

第一步：给三个容器的父容器添加padding：0 200px；腾开位置；middle中间容器设置width：100%；此时的宽度继续了父容器的100%；并且给三个子容器都设置float: left;让它们都向左浮动，去到同一行，效果如下：

此时的页面效果便是第一行位置放不下，旁边两个容器被挤到了第二行，实在按道理来说它们该当是在第一行两块赤色区域位置的，浮动的效果嘛，大家都能理解吧

第二步：给旁边容器相对定位，让它们相对自己原来文档流的位置进行定位

.left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; //向左挪动父容器宽度的100% left: -200px; //再向左挪动自身的200宽度 }

此时right接替了left原来的位置，同理，这时候只须要给right设置：margin-right: -200px; 那么就实现了我们想要的三栏布局

完全代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯</title> <style> { margin: 0; padding: 0; } .container{ height: 100px; padding: 0 200px; } .middle, .left, .right{ height: 100%; float: left; } .middle{ width: 100%; background: gray; } .left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; left: -200px; } .right{ width: 200px; background: #76d1ea; position: relative; margin-right: -200px; } </style></head><body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div></body></html>

不过这样布局有一个问题便是：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。
“由于设置了相对定位，以是当left原来的位置和right的位置产生重叠时，由于浮动的缘故原由一行放不下就会换行” 。
以是布局就被打乱了，利用双飞翼布局就可以避免这个问题。

双飞翼布局

我们先把HTML构造轻微改造一下，在middle容器里面多用了个inner容器

<body> <div class="container"> <div class="middle"> <div class="inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </div></body>

由于已经设置了middle的width：100%，这时候我们只须要设置inner容器为padding：0 200px，我们要的效果同样是把旁边两个容器摆放到对应的红框位置

接下来left、middle、right同样利用浮动，left设置margin-left:-100%;（父容器的全体宽度），right设置margin-left：-200px；这样便实现了三栏布局的效果，连定位都不该用，且当页面过小时，布局不会乱，效果如下：

完全代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼</title> <style> { margin: 0; padding: 0; } .container{ height: 100px; } .middle, .left, .right{ float: left; height: 100%; } .middle{ width: 100%; background: gray; } .inner{ height: 100%; padding: 0 200px; } .left{ width: 200px; background: pink; margin-left: -100%; } .right{ width: 200px; background: pink; margin-left: -200px; } </style></head><body> <div class="container"> <div class="middle"> <div class="inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </div></body></html>

给个图便于大家理解

总结

两种布局办法都是把紧张栏放在文档流最前面，使紧张栏优先加载

相同之处：让三列浮动，然后通过负外边距形成三列布局

不同之处在于如何处理中间主列的位置：

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