圣杯布局小结,等高分栏布局小结

作者: 前端知识  发布:2019-07-25

3. 主意三:使用相对化定位

上文未有介绍的别的一种分栏布局方法就是这里要介绍的断然定位。之所以没介绍这几个措施,是因为上文介绍的都以分栏自适应布局的方法,而相对定位的做法,不能够完全到位我们想要的分栏自适应布局,分栏自适应有多少个规格:第一是主题内容栏宽度自适应,那一点相对定位是能够产生的;第二点是全部栏的可观都能动态变化,何况无法导致父容器高度塌陷,不能够在各栏内部出现滚动或溢出的情事,那一点相对定位不便于形成适用全数场景。而本文又把这种布局方法拿出去介绍,是因为相对定位做等高布局很轻便,所以用相对定位做等高分栏布局是一种有效的方式,只是这种办法适用的现象有局地限量,需求依赖实际意况思虑是不是要选用。

做法一:全部栏都使用相对定位(对应源码中absolute_layout1.html)

<header>顶部</header> <div class="layout"> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应</div> <aside class="layout__aside layout__aside--right">右左边栏宽度固定</aside> </div> <footer>尾部</footer>

1
2
3
4
5
6
7
<header>顶部</header>
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>
<footer>底部</footer>

<style type="text/css"> .layout { height: 300px; position: relative; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 1

这种布局方法的性子是:

1)主体内容栏是自适应的;

2)全体栏完全等高,效果跟flex布局和伪table布局的意义同样;

从这两点来看,这种纯属定位的方法仍旧比较好用的,可是它有二个十分的大的运用范围,正是父成分的可观未有主意通过它的里边因素给撑起来,要用的话,必须想艺术让父成分有高度,适合做父成分高度可见大概全屏布局。例如以下那几个代码正是全屏布局的一个例子(对应源码中absolute_layout2.html):

header>顶部header> div class="layout"> aside class="layout__aside layout__aside--left">右左侧栏宽度固定aside> div class="layout__main">内容栏宽度自适应div> aside class="layout__aside layout__aside--right">右左边栏宽度固定aside> div> footer>尾部footer>

1
2
3
4
5
6
7
header>顶部header>
div class="layout">
    aside class="layout__aside layout__aside--left">左侧边栏宽度固定aside>
    div class="layout__main">内容栏宽度自适应div>
    aside class="layout__aside layout__aside--right">右侧边栏宽度固定aside>
div>
footer>底部footer>

<style type="text/css"> html,body { margin: 0; height: 100%; } footer { position: absolute; bottom: 0; width: 100%; } .layout { width: 100%; position: absolute; top: 50px; bottom: 50px; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 2

做法二:左边栏相对定位,主体内容栏保持流式布局(对应源码中absolute_layout3.html)

<div class="layout"> <aside class="layout__aside layout__aside--left">右左边栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应<br>中度扩张一些,旁边的冲天都会自行扩张</div> <aside class="layout__aside layout__aside--right">右左边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout { position: relative; } .layout__aside { position: absolute; top: 0; bottom: 0; } .layout__main { margin: 0 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 3

这几个措施的表征是:

1)主体内容栏是大幅自适应的;

2)全数栏也是一丝一毫等高的;

下边包车型地铁代码中,layout__main通过magin来给左侧栏留出空间,其实也足以在layout成分上增加padding来拍卖,效率是同样的。那些方法相比较前三个办法好一些的是,父成分的惊人能够透过器重内容栏给撑起来,不过通过也拉动了贰个新主题素材,就是内容栏中度非常不够的时候,侧面栏就能出现溢出恐怕滚动,消除这么些新主题材料的点子有2个:第一,如若侧面栏的内容都是已知的,况且未有折叠张开这种会变动左边栏内容中度的功能,那么可以给layout设置一个min-height来处理;第二,假使左侧栏的内容是动态的,除了给layout加min-height之外,还得在每一趟改变左侧栏内容的时候,主动去调治主体内容栏的万丈,假若主体内容栏的中度小于侧边栏的中度,将要更新主体内容栏的莫大。可是倘令你的内容栏的原委很多,左侧栏内容非常少的话,就毫无思念那一个新主题材料了。

纯属定位的做法正是如此,第一种限制较高;第三种多少强一些,在局部风貌下,或许还得仰仗JS来拍卖,所以综合起来不算是三个那贰个好的秘技。唯有你的布局供给恰好满意它的基准时,恐怕才会牵挂接纳它,就疑似上文中我建议的品类一的须求,就决然要用相对定位的布局来做。

7. 结束语

正文提供了4种圣杯布局的秘技,各种方式在前段时间照旧今后的干活中,断定会有为数十分的多气象都急需使用,所以有要求完全调整那些措施,内容异常少,也不复杂,希望能对你有用,谢谢阅读:)

补充:原来只想介绍圣杯布局这一种方法,后来感觉这么的从头到尾的经过有一点点粗糙,于是又特别去上学了其余2种分栏布局的不二法门,补充到了稿子里面(也等于第3、4局部),所以文章纵然题为圣杯布局,但实则讲的是分栏布局的常用方法,只有第2部分本事算是标准的圣杯布局的从头到尾的经过。由于本文在发表前后编辑了累累,导致标题跟内容有一些脱节,请勿见怪:(

本文相关代码下载

1 赞 21 收藏 1 评论

图片 4

4. 方法四:借助边框,背景完成假等高

前方介绍了二种分栏等高布局,有table布局,伪table布局,绝对定位布局,flex布局,那多样布局方法在促成等高布局时,属于完全等高的状态,正是说他们布局出来的页面,各栏的安分守己中度都是一模二样的,并且在大肆栏的剧情动态变化时,别的栏的冲天都能相应地活动调度,假使布局的时候用的是这多少个布局方法,那么等高的标题就不设有了。不过回放一下上文内容的话,上文提到的3种布局方式:圣杯布局,双飞翼布局,float布局,不用JS的话,就无法完毕这种完全等高的功能。那二种布局,只可以思考借助边框和背景实现视觉上的等高,约等于假等高的做法。究竟从成效上来讲,若无设置背景和边框的话,纵然是一心等高,视觉上也看不出来,所以假等高的做法是值得选取的。

做法一:利用背景图片

以布局容器宽度固定的左中右三栏布局表达这么些做法的步子,首先制作一张高度十分的小,宽度跟布局容器宽度一样的背景图片,把那张图片作为布局容器的背景图垂直平铺。那张背景图供给跟页面同样也是分栏,而且每栏的上升的幅度和栏之间的间距都跟页面布局里面包车型地铁栏位宽度和栏位间隔同样,这样技艺担保,背景图片的各样栏位与页面里面包车型客车种种栏位重合。因为页面里面包车型大巴各类栏位底下,都有二个背景图片的栏位跟它对应,所以纵然某一栏中度相当不足,不过视觉上这些栏位的高度跟布局容器的中度是一样的,这正是依赖背景图来完成视觉等高的原理。这一个做法的经文例子正是,它的布局成效是那般的:

图片 5

看起来那是多少个三栏等高布局,分栏是由此float完毕的,等高却不是一心等高,而是通过背景图片达成的,它在布局容器上用了下边那张背景图:

图片 6

图片 7

它的布局html结构是(苏州克掉的是header,导航栏,footer,跟分栏布局尚未关联,所以注掉了):

图片 8

下一场各栏只要都向左浮动,配置好宽度就行:

图片 9图片 10图片 11

前边表达这几个做法的步骤包含举的例证都指向的是布局容器宽度固定的左中右三栏布局,假如是自适应的分栏布局,又该怎么管理?上边以上文圣杯布局的布局三怎么依附背景图片做到等高效果来证实(为了收缩篇幅,其余两种布局不会相继表达,不过那八种布局在源码中都有demo页面可查看,分别对应grail_bg_layout{1,5}.html)。

布局三:3栏搭架子,2个左边栏分别固定在右手和左手,中间是重头戏内容栏:

div class="layout--wrapper"> div class="layout"> aside class="layout__aside layout__aside--left">侧边边栏宽度固定aside> div class="layout__main">内容栏宽度自适应br>中度增加有个别,旁边的中度看起来都跟内容栏中度一样div> aside class="layout__aside layout__aside--right">右右侧栏宽度固定aside> div> div>

1
2
3
4
5
6
7
div class="layout--wrapper">
    div class="layout">
        aside class="layout__aside layout__aside--left">左侧边栏宽度固定aside>
        div class="layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度看起来都跟内容栏高度一样div>
        aside class="layout__aside layout__aside--right">右侧边栏宽度固定aside>
    div>
div>

<style type="text/css"> .layout:after { content: " "; clear: both; display: table; } .layout__aside, .layout__main { float: left; height: 100%; } .layout--wrapper { background: url(aside_left.png) left top repeat-y #4DBCB0; } .layout { background: url(aside_right.png) right top repeat-y; padding:0 210px; } .layout__main { width: 100%; } .layout__aside { width: 200px; } .layout__aside--left { margin-left: -210px; } .layout__aside--right { margin-right: -210px; float: right; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout--wrapper {
        background: url(aside_left.png) left top repeat-y #4DBCB0;
    }
    .layout {
        background: url(aside_right.png) right top repeat-y;
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -210px;
    }
    .layout__aside--right {
        margin-right: -210px;
        float: right;
    }
</style>

效果:

图片 12

兑现这几个等高效果的机若是:

1)去掉在layout__aside layout__main上安装的背景象;

2)制作2张背景图片,宽度都以210 * 10,分别用来做多个侧面栏的背景:

aside_left.png : 图片 13

aside_right.png: 图片 14

3) html结构某些调节下,加一层wrapper

4)layout–wrapper的背景如下设置:

background: url(aside_left.png) left top repeat-y #4DBCB0;

如此那般左边边栏和内容栏就都有了背景,侧面边栏与内容栏之间的区间效果也出去了。

5)layout的背景如下设置:

background: url(aside_right.png) right top repeat-y;

与此相类似右侧面栏就有了背景,右左侧栏与内容栏之间的间隔效果也出去了。

以上正是采纳背景图做假等高效果的全体内容,这一个做法对于要用背景来表现等高效果的布局是不行好用的一个措施,纵然网络都说它的弱项是用到了图片,布局一改,图片将要改,笔者个人感觉那并非欠缺,因为那样的必要变动,第一是力不胜任幸免,第二是退换地次数不肯定比较多,第三哪怕变了改起来也是两八分钟的事,假设本身会点PS,那弄起来就更简明了。能消除难题的简要方法正是最棒的主意。

做法二: 利用边框重叠

第一得说那个做法,适合要用边框来表现等高效果的布局,约等于说各栏无法有背景,不然看起来边框是等高了,但是背景未有等高。它的规律要分成两有些来讲,要是是2栏搭架子,做法比较轻便,比方左右分栏的布局,给左边栏加八个侧边框,给内容栏加三个侧面框,然后给内容栏加上负的margin-left,让2个边框重合,那样无论哪个栏位内容多,边框重叠之后的万丈就跟全体的中度一致了,也就达到了我们想要的等高效果;要是是多栏布局,这种边框重叠的艺术不可能到位全体场景下的视觉等高,譬喻说左中右三栏布局,以往是按边框重叠的格局落到实处了下等高,当左边栏的剧情动态扩张比很多时,右边左边栏跟内容栏的边框全体中度,并不会动态扩张,然后就能产生错层的法力,对于这种景观,能够接纳相对定位,用额外的空成分模拟栏与栏之间的边框效果。

上边以上文圣杯布局的布局一和布局三怎么借助边框重叠和模拟成功等高效果来验证(为了削减篇幅,别的布局不会挨个表达,可是那二种布局在源码中都有demo页面可查阅,分别对应grail_border_layout{1,3}.html)。

1)布局一:2栏布局,侧面栏固定在左边手,右边是大旨内容栏:

<div class="layout"> <aside class="layout__aside">侧面栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应<br>中度扩大有些,旁边的可旁观起来都跟内容栏中度一致</div> </div>

1
2
3
4
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度看起来都跟内容栏高度一样</div>
</div>

<style type="text/css"> .layout:after { content: " "; clear: both; display: table; } .layout__aside, .layout__main { float: left; } .layout { padding-left: 201px; } .layout__main { width: 100%; margin-left: -1px; border-left: 1px solid #ccc; } .layout__aside { width: 200px; border-right: 1px solid #ccc; margin-left: -201px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 201px;
    }
    .layout__main {
        width: 100%;
        margin-left: -1px;
        border-left: 1px solid #ccc;
    }
    .layout__aside {
        width: 200px;
        border-right: 1px solid #ccc;
        margin-left: -201px;
    }
</style>

要点是:

1)要重新调解layout的padding值,和layout__aside的margin值,栏与栏之间无法有距离;

2)layout__main设置-1px的margin-left和1px的border-left;layout__aside设置1px的border-right

效果:

图片 15

布局三:3栏搭架子,2个右侧栏分别固定在侧边和左边,中间是注重内容栏:

<div class="layout"> <aside class="layout__division layout__division--left"></aside> <aside class="layout__division layout__division--right"></aside> <aside class="layout__aside layout__aside--left">侧边边栏宽度固定<br>再加点东西<br>再加点东西</aside> <div class="layout__main">内容栏宽度自适应<br>中度扩张有个别</div> <aside class="layout__aside layout__aside--right">右左侧栏宽度固定</aside> </div>

1
2
3
4
5
6
7
<div class="layout">
    <aside class="layout__division layout__division--left"></aside>
    <aside class="layout__division layout__division--right"></aside>
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定<br>再加点东西<br>再加点东西</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout:after { content: " "; clear: both; display: table; } .layout__aside, .layout__main { float: left; height: 100%; } .layout { padding:0 201px; position: relative; } .layout__main { width: 100%; } .layout__aside { width: 200px; } .layout__aside--left { margin-left: -201px; } .layout__aside--right { margin-right: -201px; float: right; } .layout__division { position: absolute; border-left: 1px solid #ccc; height: 100%; } .layout__division--left { left:200px; } .layout__division--right { right:200px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout {
        padding:0 201px;
        position: relative;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -201px;
    }
    .layout__aside--right {
        margin-right: -201px;
        float: right;
    }
    .layout__division {
        position: absolute;
        border-left: 1px solid #ccc;
        height: 100%;
    }
    .layout__division--left {
        left:200px;
    }
    .layout__division--right {
        right:200px;
    }
</style>

效果:

图片 16

布局三这么些做法的法规比实际的边框重叠还要简单些,但是不及这种办法轻易,究竟要扩张并未有用的html成分,所以不算是贰个好措施。

终极总结比较背景和边框这三种假等高做法,更值得推荐的是做法一,边框这种意义,通过背景图也是足以做出来的,何况边框能够达成的视觉效果有限,利用边框的多栏等高布局还得充实冗余的HTML成分,缺陷相比较显明。

4. 圣杯布局的纯浮动达成

前边三种情势都有2个共同点:

1)layout__main或layout__main-wrapper和layout__aside都会同时浮动;

2)都得依赖负值属性达成。

骨子里还设有一种尤其简洁的做法,无需浮动layout__main或layout__main-wrapper,也不须求依附负值属性,只要浮动layout__aside,给layout__main加上适当的margin值,就能够选择生成成分的个性,达成想要的分栏布局功效。照旧以布局三为例,表达这种格局,其余措施得以从源码中查看,对应的是float_layout{1,5}.html:

<aside class="layout__aside layout__aside--left">右左边栏宽度固定</aside> <aside class="layout__aside layout__aside--right">右左侧栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> <footer class="clear">底部</footer>

1
2
3
4
<aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<footer class="clear">底部</footer>

<style type="text/css"> .clear { clear: both; } .layout__main { margin: 0 210px; } .layout__aside--left { width: 200px; float: left; } .layout__aside--right { width: 200px; float: right; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .clear {
        clear: both;
    }
 
    .layout__main {
        margin: 0 210px;
    }
 
    .layout__aside--left {
        width: 200px;
        float: left;
    }
 
    .layout__aside--right {
        width: 200px;
        float: right;
    }
</style>

这段代码的功力与第2局地搭架子三的功力一样,这种方式的表征是:

1)清除浮动需依赖外界因素;

2)layout__main上面不能够选取clear属性。

等高分栏布局小结

2016/02/06 · CSS · 等高分栏

原著出处: 流云诸葛   

上一篇文章《圣杯布局小结》总括了二种广泛的分栏布局方法,那一个点子都能够兑现多栏页面下,全体栏的冲天可动态变化,某一栏宽度自适应的布局效能,能满意职业中众多搭架子必要。后来自身在征集越来越多关于分栏布局的篇章时,开采了一个新的标题,那一个难题在这几天那篇小说中也是有朋友在批评里跟自家谈到,正是怎么样在落到实处分栏布局的同期有限匡助每栏的冲天同样。笔者意识这种等高分栏布局的情状,在网址内部其实也很广阔,所以本文总计了二种可用的不二等秘书技来解决这几个新的要求。

2. 圣杯布局的价值观实现情势

应用圣杯布局的章程,可以轻易完成上面包车型地铁布局功效:

图片 17

下边来每家每户表达上海教室中四种布局效率的兑现情势(正文相关代码下载,本有的的布局方法在代码中对应grail_layout{1,5}.html)。

1)布局一:2栏搭架子,侧面栏固定在左边,侧边是主体内容栏:

<div class="layout"> <aside class="layout__aside">左侧栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div>

1
2
3
4
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout__aside, .layout__main { float: left; } .layout { padding-left: 210px; } .layout__main { width: 100%; } .layout__aside { width: 200px; margin-left: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
        margin-left: -210px;
    }
</style>

效果是:

图片 18

2)布局二:2栏搭架子,左边栏固定在左臂,左边是珍视内容栏:

<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">左侧栏宽度固定</aside> </div>

1
2
3
4
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout { padding-right: 210px; } .layout__main { width: 100%; float: left; } .layout__aside { float: right; width: 200px; margin-right: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 210px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        float: right;
        width: 200px;
        margin-right: -210px;
    }
</style>

效果是:

图片 19

3)布局三:3栏搭架子,2个左边栏分别固定在左侧和左侧,中间是中央内容栏:

<div class="layout"> <aside class="layout__aside layout__aside--left">右左边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside layout__aside--right">右侧面栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout__aside, .layout__main { float: left; } .layout { padding:0 210px; } .layout__main { width: 100%; } .layout__aside { width: 200px; } .layout__aside--left { margin-left: -210px; } .layout__aside--right { margin-right: -210px; float: right; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -210px;
    }
    .layout__aside--right {
        margin-right: -210px;
        float: right;
    }
</style>

效果是:

图片 20

4)布局四:3栏搭架子,2个左侧栏同有时间一定在右边手,侧面是重点内容栏:

<div class="layout"> <aside class="layout__aside layout__aside--first">第二个左侧栏宽度固定</aside> <aside class="layout__aside layout__aside--second">第四个左边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout__aside, .layout__main { float: left; } .layout { padding-left: 420px; } .layout__main { width: 100%; } .layout__aside { width: 200px; } .layout__aside--first { margin-left: -420px; } .layout__aside--second { margin-left: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 420px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--first {
        margin-left: -420px;
    }
    .layout__aside--second {
        margin-left: -210px;
    }
</style>

效果是:

图片 21

5)布局五:3栏布局,2个左侧栏同一时间一定在左边,侧面是主导内容栏:

<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside layout__aside--first">第2个侧边栏宽度固定</aside> <aside class="layout__aside layout__aside--second">第二个左侧栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside--first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside--second">第2个侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout { padding-right: 420px; } .layout__main { width: 100%; float: left; } .layout__aside { width: 200px; float: right; } .layout__aside--first { margin-right: -210px; } .layout__aside--second { margin-right: -420px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 420px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        width: 200px;
        float: right;
    }
    .layout__aside--first {
        margin-right: -210px;
    }
    .layout__aside--second {
        margin-right: -420px;
    }
</style>

效果是:

图片 22

PS:

1)本文提供的那么些布局方法,比互连网见到的愈益从简一些,首假若因为不思量包容IE8及以下,不惦念把layout__main那几个因素放在最前边,就算卓越的做法都务求把layout__main做法放在前方,那样能够让网页主体内容优先渲染,小编觉着这种思虑是全然多余的,2个因素的渲染顺序分裂,实际上的用户体验差异又有多大呢,为了八个肉眼看不到的出入,而采取更复杂的做法,不值得;

2)css布局类的命名选用了BEM的命名法规,那个能够辅助您写出结构化,标准化的css,有意思味的能够去询问:

3)在运用上述措施时,需注意html结构中layout__main与layout__aside的顺序;

5. 结束语

本文介绍了4种能够做到一心等高的分栏自适应布局方法,对于上文的二种分栏布局:圣杯布局,双飞翼布局,float布局,也提供了二个差比比较少便捷的不二诀要能够变成视觉上的假等高效果,那么些方式都是万无一失有效的,只要满足本人的劳作需求,喜欢用哪类就用哪一种,毕竟工作的目标是成功工作对象,实际不是尝试哪个种类工具好用。但若是商家的制品不思索那么些陈旧的浏览器的话,小编认为全数的布局只需求八个措施:flex,table-cell和position,另外的圣杯布局,双飞翼布局,float布局就让它成为卓越,留在本人的博客总结中就好。PS: 固然上文我在推荐圣杯布局,可是自身一度企图把自家的项目二的布局方式换到table-cell来搞了。

本文内容好多,相信贻误你多多时间,谢谢阅读,提前祝你大年快乐:)

正文相关源码下载

1 赞 5 收藏 评论

图片 23

3. 圣杯布局守旧完毕格局的一种变体

第2片段介绍的点子,使用门槛是:

1)layout成分依据分栏布局的须求安装合适的padding,举个例子布局一,需配置padding-left;

2)layout__main和layout__aside成分都须要调换,layout__main需配置float: left;layout__aside需依靠分栏布局供给陈设合适的float值,比方布局一,需配备为float: left;而布局二需布置float: right;

3)layout__main和layout__aside的逐个也很主要,具体内容可比较之下前边多样布局的html;

4)layout__aside需依据分栏布局要求,配置合适的margin-left或margin-right,譬如布局一,需配备margin-left;布局二需安插margin-right。

纵然本身厌恶早晚要咬牙把layout__main放在眼下,但是从第2有的这种措施的思路,衍生出的别的一种办法,却只好供给始终把layout__main放在最前方,这种变体做法,也被誉为双飞翼布局。下边来探问双飞翼布局的兑现格局(想念到篇幅难点,本处仅提供布局三的代码,要想打听七种布局的事无巨细措施,能够因而在第2局地提供的下载链接下载源码去打听,本有的的布局方法在代码中对应wing_layout{1,5}.html)

1)布局三:3栏搭架子,2个侧边栏分别固定在右边和左侧,中间是器重内容栏:

<div class="layout__main-wrapper"> <div class="layout__main">主内容栏宽度自适应</div> </div> <aside class="layout__aside layout__aside--left">右侧边栏宽度固定</aside> <aside class="layout__aside layout__aside--right">右左侧栏宽度固定</aside> <footer class="clear">尾巴部分</footer>

1
2
3
4
5
6
<div class="layout__main-wrapper">
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
<footer class="clear">底部</footer>

<style type="text/css"> .clear { clear: both; } .layout__main-wrapper,.layout__aside { float: left; } .layout__main-wrapper { width: 100%; } .layout__main { margin: 0 210px; } .layout__aside { width: 200px; } .layout__aside--left { margin-left: -100%; } .layout__aside--right { margin-left: -200px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .clear {
        clear: both;
    }
    .layout__main-wrapper,.layout__aside {
        float: left;
    }
    .layout__main-wrapper {
        width: 100%;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -100%;
    }
    .layout__aside--right {
        margin-left: -200px;
    }
</style>

这段代码的坚守与第2片段布局三的效果等同,这种布局的诀窍是:

1)能够未有layout这一层包裹成分;

2)浮动清除需在外界因素上管理;

3)float和margin属性的设置方向相对统一,基本都以四个样子就可以;

4)布局四和布局五贯彻起来,双飞翼布局还索要依赖position:relative才行,应当要复杂一点。

本文由金沙澳门官网发布于前端知识,转载请注明出处:圣杯布局小结,等高分栏布局小结

关键词: 金沙澳门官网

上一篇:以20像素为基准的CSS网页布局实践分享
下一篇:没有了