两招搞定三栏布局——圣杯布局、双飞翼布局

Kaede 发布于2019-08-29 16:19 / 2239人阅读

摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。

如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？

这是一道经典的面试题，常用的方法是：圣杯布局、双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。

圣杯布局

首先，我们先定义HTML结构：


    中间的
    左边的
    右边的

再来开始我们的布局，首先给这三个div都给一个float: left，让它们均左浮动。

.middle, .left, .right{
    float: left;
}

接下来是最重要的两个步骤，设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。

再设置右盒子的margin-left: -右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。

.left{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -100%;
    }
    
.right{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -300px;  //300px为右盒子的宽度
}

【*】此时的布局基本出来了，但是中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。给左右盒子position: relative，再分别设置它们的left和right,并且控制父元素的padding来为左右两边留白。

.left{
    position: relative;
    left: -300px;
}

.right{
    position: relative;
    right: -300px;
}

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 400px;
}

ok！大功告成，圣杯布局已经完成啦~

双飞翼布局

双飞翼的布局基本和圣杯布局类似，它的HTML结构为：


    
        中间的
    
    左边的
    右边的

前面的布局和圣杯完全一致，只是从【*】开始的这一步略微有些差异。

在双飞翼中避免左右盒子被覆盖，是通过设置inner_middle的左右margin来实现的。

.inner_middle{
    margin: 0 300px;
}

另外，整个布局的左右padding留白也有些差异，直接设置父盒子的padding为左右留白的宽度就可以了。

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 100px;

}

这里还有第二种实现方式，HTML结构沿用圣杯布局的结构，通过设置左右padding来避免中间盒子内容的覆盖。同时为了避免布局混乱，还有设置box-sizing: border-box，表示width包括border和padding，这样可以保证即使设置右左右padding，它的总宽度也是不变的。

.middle{
    background: #ccc;
    width: 100%;
    height: 300px;
    padding: 0 300px;
    box-sizing: border-box;
}

云服务器 GPU云服务器圣杯布局三栏布局双飞翼布局 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113671.html

圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

Clect 2019-08-02 16:17 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

468122151 2019-08-30 10:49 评论0 收藏0
圣杯布局和双飞翼布局

摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局圣杯布局dom结构：圣杯布局 ...

yankeys 2019-08-29 13:54 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0