欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

经典的三栏布局：圣杯布局，双飞翼布局，flex布局

发布时间：2023/12/31 编程问答 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 经典的三栏布局：圣杯布局，双飞翼布局，flex布局 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

需求：
两边栏固定宽度，中间宽度自适应，一般左边栏为导航，右边栏为广告，中间栏为主要内容的展示，div块上中间栏放在第一位，重要的东西放在文档流前面可以优先渲染。

圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。首先中间栏width 100%后，左右栏被挤在第二行，左栏margin-left设置为-100%后（实际即为中间栏的宽度），这样左栏就跟中间栏并列，且左栏和中间栏的左边缘对其，同理右栏margin-left(因为float是向左的)设置为右栏自己宽度的负值，这样就升上去，且右边缘和中间栏的右边栏重合。

现在的问题就是左右栏占用了main的空间。圣杯布局和双飞翼的布局的处理差异也就在这里：

1.圣杯布局

圣杯布局的处理方式为父容器container设置padding-left和padding-right为左右栏的宽度，此时左右栏会表现往里面缩一些，因为padding只是调节内部元素的位置并不会显示width的content（盒子模型），对外部元素没影响。此时就需要用相对定位调节左右栏left和right为父容器pading左右值的负值，这样就移开了左右栏对中间栏的占据，且中间栏的内容全部显示在width的content中。

代码：

<!-- 圣杯布局 --> <!DOCTYPE html> <html><head><style>.left {background: #E79F6D;width: 150px;float: left;}.main {background: #D6D6D6;width: 100%;float: left;}.right {background: #77BBDD;width: 190px;float: left;}.left {margin-left: -100%;}.right{margin-left:-190px;}/* 设置padding后，margin是不占用其他元素的padding的，padding只是用来调节内部元素与本身的距离，margin调节才是本身与周围之间的距离 */.con {padding-left: 150px;padding-right: 190px;}.left {position: relative;left: -150px;}.right {position: relative;right: -190px;}</style> </head><body><div class="con"><div class="main">Main</div><div class="left">Left</div><div class="right">Right</div></div> </body></html>

2. 双飞翼布局

双飞翼并列的方式与圣杯布局相同，但是摈弃了相对定位的方式。而是给中间栏加了一个父容器，父容器设置float，子容器设置margin-left和margin-right抵消左右栏布局的宽度，避免content显示部分被左右栏覆盖到自己宽度。（注意不是float左右因为margin移动了，而是是中间栏的content的内容width一部分宽度分给了margin，自己缩小了，float是脱离的文档流的，无视block，但是受影响到文字，参考文字环绕）。

代码：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.main-wrapper {float: left;width: 100%;}.main {height: 300px;/* 多10px间距 */margin-left: 210px;margin-right: 190px;background-color: rgba(255, 0, 0, .5);}.sub {float: left;width: 200px;height: 300px;margin-left: -100%;background-color: rgba(0, 255, 0, .5);}.extra {float: left;width: 180px;height: 300px;margin-left: -180px;background-color: rgba(0, 0, 255, .5);}</style> </head> <body><div class="main-wrapper"><div class="main"></div></div><div class="sub"></div><div class="extra"></div></body> </html>

先进而简单的flex布局

1.order指定顺序，默认为0，越小越靠前

2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

3.flex-basic:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.container {display: flex;min-height: 300px;}.left {order: -1;flex-basis: 300px;background-color: green;}.right {flex-basis: 150px;background-color: red;}.main {flex-grow: 1;background-color: blue;}</style><title>Document</title> </head> <body><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div></body> </html>

转载于:https://www.cnblogs.com/zhangmingzhao/p/9332174.html

总结

以上是生活随笔为你收集整理的经典的三栏布局：圣杯布局，双飞翼布局，flex布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。