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

2018-08-10 admin

如何实现如下的这种中间自适应宽度,左右两栏固定宽度布局? 三栏布局 这是一道经典的面试题,常用的方法是:圣杯布局、双飞翼布局。相信看完这篇文章,你就能很清楚的知道什么是圣杯和双飞翼了。

圣杯布局

首先,我们先定义HTML结构:

<div class='container'>
    <div class="middle">中间的</div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

再来开始我们的布局,首先给这三个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结构为:

<div class='container'>
    <div class="middle">
        <div class="inner_middle">中间的</div>
    </div>
    <div class="left">左边的</div>
    <div class="right">右边的</div>
</div>

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

在双飞翼中避免左右盒子被覆盖,是通过设置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;
}

原文链接:https://segmentfault.com/a/1190000015950592

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37656.html

文章标题:两招搞定三栏布局——圣杯布局、双飞翼布局

相关文章
js实现顶部可折叠的菜单工具栏效果实例
本文实例讲述了js实现顶部可折叠的菜单工具栏效果。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 T...
2017-03-23
javascript解析xml实现省市县三级联动的方法
本文实例讲述了javascript解析xml实现省市县三级联动的方法。分享给大家供大家参考。具体实现方法如下: (该方法适用于任何常用浏览器) &lt;body&gt; &lt;div&gt; &lt;span&gt; &lt...
2017-03-27
javascript检测两个数组是否相似
JS要比较两个数组是否有相同的元素,即两个数组所有元素都相同,但元素的顺序不一定一致。只就需要先将数组进行排序,再比较两个数组是否相等。 &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2...
2017-03-23
JavaScript使用Max函数返回两个数字中较大数的方法
本文实例讲述了JavaScript使用Max函数返回两个数字中较大数的方法。分享给大家供大家参考。具体如下: JavaScript的Math对象带有一个max函数用于获取两个数字的较大数,下面的代码详细演示了max的用法 &lt;!DOCT...
2017-03-22
javascript比较两个日期相差天数的方法
本文实例讲述了javascript比较两个日期相差天数的方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD HTML 4.01...
2017-03-27
js实现两点之间画线的方法
本文实例讲述了js实现两点之间画线的方法。分享给大家供大家参考。具体分析如下: 最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看。 两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折...
2017-03-23
text-align:justify实现文本两端对齐 兼容IE
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间。 ...
2017-03-29
JavaScript在浏览器标题栏上显示当前日期和时间的方法
本文实例讲述了JavaScript在浏览器标题栏上显示当前日期和时间的方法,分享给大家供大家参考。具体如下: 将这段脚本放到head区即可: &lt;script language=&quot;JavaScript&quot;&gt; &l...
2017-03-21
JavaScript中判断两个字符串是否相等的方法
先将用户的输入值全部转换为大写(或小写),然后再行比较: var name = document.form1.txtUserName.value.toLowerCase(); if(name == &quot;urname&q...
2017-03-27
JavaScript合并两个数组并去除重复项的方法
本文实例讲述了JavaScript合并两个数组并去除重复项的方法。分享给大家供大家参考。具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(v...
2017-03-24
回到顶部