快捷搜索:
来自 新京葡娱乐场网址 2019-07-15 23:06 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

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

等高分栏布局小结

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

原稿出处: 流云诸葛   

上一篇小说《圣杯布局小结》总计了三种常见的分栏布局方法,那多少个主意都足以达成多栏页面下,全数栏的惊人可动态变化,某一栏宽度自适应的布局作用,能满意职业中过多布局必要。后来笔者在访问更加多关于分栏布局的文章时,开采了贰个新的题材,这么些标题在前头那篇小说中也是有意中人在夸夸其谈里跟自己聊起,正是怎么着在促成分栏布局的还要确保每栏的可观同样。作者开掘这种等高分栏布局的图景,在网址内部其实也很广阔,所以本文化总同盟结了三种可用的主意来化解这一个新的急需。

圣杯布局小结

2016/01/30 · HTML5 · 1 评论 · 圣杯布局

初稿出处: 流云诸葛   

圣杯布局,十分久从前就听过,可是一向都没详细询问过,前段时间因为做了三个体系,借鉴了薪人薪事这么些公司的成品页面,才第一遍用到这种布局情势。于是就花了点时间,测了下它实现分布分栏布局的代码,每段代码都特别轻松,但布局作用很圆满,比自身从前用的章程好用非常多。本文是对它完成格局的部分总括,希望能够把这种本领引入给跟自家从前一样对它比较不熟悉的开荒职员:)

1. 方法一:万能的flex

跟上篇文章区别,这一次把flex这种艺术放在了第一人,因为相比起来,它是享有分栏布局方法里面,优点最多的,假使包容性允许的话,很有不能缺少在别的时候都优先利用它产生页面布局。假设你展开上篇小说,找到尾数第二片段关于flex实现分栏布局的代码,可能把上篇文章提供的代码下载下来,直接预览flex_layout.html,你会发觉上篇小说的这段代码其实已经到位了等高分栏布局,同一段代码,能够达成上篇作品中提到的种种分栏布局,还足以实现本文提到的等高布局的景观,这种力量别的措施真的不只怕比拟。而它之所以能落到实处等高布局,跟一个flex的css属性有涉嫌,那本性情是:align-item。它的暗中同意值是:stretch,在flex item成分比方layout__main或layout__aside的冲天未定义或许为auto的情景下,会拉伸flex item成分的万丈或宽度,铺满flex的交叉轴,详细的规律能够通过上文提供的flex学习能源去探听,这里只做三个轻松易行的引用表明。

1. 从2个实际的需要聊到

当年有2个系列,都以管制体系的连串,这种类型的分界面特点基本都是左臂边栏凸显菜单,侧面彰显网页主体照旧是最上部的导航栏展现菜单,导航栏以下突显网页主体,作者那八个品种都以首先种档案的次序:

项目一:

图片 1

项目二:

图片 2

在做项目一的时候,选取了在此以前做ERP软件的一对做法,侧面的网页主体区域放置的是贰个iframe,用来展现各类菜单点击之后的页面,那样各样菜单点击之后,外界页面都不会刷新,而且滚动也只产生在iframe里面,外界页面包车型大巴菜系区域和最上端导航栏的动静一贯不会变动,用户操作起来极度便捷。这种分界面布局的做法特别轻松,只要左边栏和网页主体区域都使用一定定位就可以:

<div class="sidebar"></div> <div class="page-content"></div> .sidebar { position: absolute; width: 200px; left: 0; bottom: 0; top: 50px; border-right: 1px solid #E7E7E7; } .page-content { position: absolute; left: 205px; bottom: 0; top: 50px; right: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="sidebar"></div>
<div class="page-content"></div>
 
.sidebar {
    position: absolute;
    width: 200px;
    left: 0;
    bottom: 0;
    top: 50px;
    border-right: 1px solid #E7E7E7;
}
 
.page-content {
    position: absolute;
    left: 205px;
    bottom: 0;
    top: 50px;
    right: 0;
}

鉴于那个项目是贰个之中项目,所以选拔这种分界面结构完全部是足以承受的,毕竟那只是贰个管制种类,能够不那么在乎用户体验怎么着的。近期做项目二的时候,情状就不平等了,那一个类型是一个厂商级的管理选择,它不再是多个可是的管制种类,而是面向外界用户提供的参预平台作业的一个终极应用,从用户体验的角度来讲,项目一这种固定呆滞的方法不太拿得入手给外人用,不然外人一定会认为你的运用做的很low。相对于项目一的分界面,项目二有以下特征:

1)菜单点击之后,界面是完全刷新,未有iframe了;

2)左边栏和入眼内容栏的冲天都以不稳固的;

3)网页滚动的时候,是页面全部滚动,实际不是只滚动主体内容。

多少个礼拜前,看到薪人薪事融通资金的情报,心想那是个如何店肆,怎么以前都没听过,做什么职业的,于是就百度了下,注册了账号,进去体验了瞬间它的成品,后来意识它做的莫过于是二个SAAS应用,分界面上看是叁个卓越的管住连串的风骨,可是全部体验还不易,当时就感觉未来或然有参照借鉴的价值。正好下周一时安顿要做项目二,依照项目一提了某些须求,于是就想到薪人薪事的应用了。唯有3天时间,职业除了分界面之外,还应该有4个业务模块的效应要成功,为了完毕这些事物,分界面布局完全参照了薪人薪事的做法,由于原先没用过这种布局格局,所以感觉很魔幻,就特别访谈知识学习了一下,才意识这几个方法正是从前听过的圣杯布局。项目二所用的布局方法就是圣杯布局情势中左侧栏固定,主体内容栏自适应的一种做法。

2. 方法二:使用table或者伪table

上篇文章中还应该有别的二种布局方法未有介绍,第一种就是这里要说的table布局或许伪table布局。table布局用的就是table tr td那几个成分去落到实处,相信绝超过四分之二web开垦人士在入门html时,首先接触到的布局方法肯定正是table布局了,这种情势简便高效,用它做任何分栏布局都不是主题材料,只是因为table的嵌套结构太多,html冗杂,又不便利DOM的操作和渲染,用来布局不相符语义,同理可得劣点比较多,所以方今的意况下,用的动静更加少了。伪table布局其实跟table布局类似,只可是依靠css,能够让大家不直接采纳table tr td这么些直接的报表成分,而是经过display: table, display: table-row, display: table-cell,退换元素的来得特性,让浏览器把这么些成分当成table来渲染,这种渲染的显示跟用真实的table未有啥差异,就连那三个table专项使用的css属性,比方table-layout,border-collapse和border-spacing,都能发出效果与利益。table布局的章程已经非常少被采用了,本文也就没须求再去介绍,不过伪table布局的艺术值得学习一下,经过这两日的学习,开采伪table的格局相比直接用表格布局,有无尽的独到之处,值得运用到办事中去。但是在验证使用伪table布局的法子此前,得先领会一些伪table相关的学问:

1)可用于伪table表现的display属性值有:

图片 3

2)当把贰个要素的display属性设置成以上列出的值后,就能够把这些因素看成与该属性对应的报表成分,比方table-cell对应的正是td;同时,那一个成分集会场全数跟表格元素同样的风味,举个例子display: table恐怕inline-table的因素得以接纳table-layout,border-collapse和border-spacing那三个原来独有table本领卓有成效的特性;display:table-cell的成分跟td同样,对步长中度敏感,对margin值无反应,对padding有效。

3)关于table-cell还会有少数要注解的正是,它会被其余一些CSS属性破坏,比如float, position:absolute,所以这一个天性子无法同一时候采用。

4)跟直接动用表格元素分化的是,在选拔表格成分的时候要求完全遵循表格成分嵌套结构,也正是下面这种:

<table> <thead> <th></th> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <th></th> </tfoot> </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用伪table的那个属性时,能够仅单独选择某一个属性,浏览器会在那么些要素的外层包裹缺点和失误的来有限支撑伪table要素框嵌套结构的完整性,这么些框跟常提到的行框同样都以不可知的,网络有的作品里也把这种做法叫做佚名表格。上边包车型客车这么些代码中,tb-cell成分的外层未有加display: table-row和display: table的因素:

.tb-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } <div class="tb-cell">这是第1个display: table-cell;的元素。</div> <div class="tb-cell">这是第2个display: table-cell;的元素。</div>

1
2
3
4
5
6
7
8
.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
 
<div class="tb-cell">这是第1个display: table-cell;的元素。</div>
<div class="tb-cell">这是第2个display: table-cell;的元素。</div>

这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

1
这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

然则看看的效应是(天灰背景是它们父层的二个包裹成分: width: 800px;margin-left: auto;margin-right: auto):

图片 4

因为浏览器自动在那八个要素的外层,加了跟能够跟tr和table起同样作用的框,来含有那多个因素变成的框,所以那七个要素看起来就跟实际的表格效果等同。假若浏览器未有做那么些管理,那七个因素之间是不容许未有空闲的,中间会有叁个因为换行符呈现出来的空格。这种自发性抬高的框都以行内框,不是块级框。

接下去看看哪些通过那么些伪table的质量来成功上文的分栏布局以及本文供给的等高分栏布局,玩的方法有无数:(正文相关源码下载)

游戏的方法一:模拟直接用表格布局(对应源码中table_layout1.html)

这种方法的思绪是布局时完全根据表格的嵌套等级次序来管理,把display: table, display: table-row, display: table-cell都用上,相当于正是行使总体的table来做,比方说要促成上文的布局三(3栏布局,2个左边栏分别固定在侧面和右侧,中间是主体内容栏),就可以这么干:

<div class="layout"> <div class="layout__row"> <aside class="layout__col layout__aside layout__aside--left">左边边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度扩充一些,旁边的莫大都会活动扩张</div> <aside class="layout__col layout__aside layout__aside--right">右左边栏宽度固定</aside> </div> </div>

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

<style type="text/css"> .layout { display: table; width: 100%; } .layout__row { display: table-row; } .layout__col { text-align: center; display: table-cell; } .layout__col .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } </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 {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

效果与利益依旧十二分效果,况且天生帮忙等高布局:

图片 5

其一布局原理跟使用table是一心平等的,所以采纳起来极度轻松(以上提供的是针对上文布局三的实现,别的四个布局的兑现不会再逐条介绍了,源码里面也不会提供,因为相对比较轻易)。

这种伪table布局有怎么着特色呢:

1)相比较直接用表格成分,这种做法不供给思考语义,表格成分是有语义的,重即使用来显示网页上列表型的多少内容,即便能够造成布局,不过布局结构都以从未语义的,所以一贯用表格不合适,而这种伪table布局的特征就是:它未有语义,不过足以像表格那样布局;

2)html的档期的顺序结构相比较直接用table成分也要简单一些,大家这边只用到了3层,直接用table成分的话也许还应该有tbody这一层;

3)相比较上文提到的那多少个布局方法,如圣杯布局和双飞翼布局,这些做法在css方面相对轻松,在html方面也只多了一层嵌套;

4)短处是分栏之间的距离不能够用margin和padding来做,假设用margin,那天天性在display: table-cell的元素上历来不会生效;若是用padding,那像demo里面各栏的背景象就都会连到一块,做不出间隔的职能,若是在layout__col里面再嵌套一层,在这一层设置背景象的话,又会追加html的档案的次序,也不是很好。小编那边是投了个巧,用border处理了一晃。

玩法二:去掉display: table-row(对应源码中的table_layout2.html)

这段日子说过,浏览器会用无名氏表格的艺术,增加缺点和失误的框,所以游戏的方法一中的代码,把layout-row完全去掉,一点都不影响布局功用:

div class="layout"> aside class="layout__col layout__aside layout__aside--left">右边边栏宽度固定aside> div class="layout__col layout__main">内容栏宽度自适应br>中度扩充有个别,旁边的惊人都会自行扩大div> aside class="layout__col layout__aside layout__aside--right">右右边栏宽度固定aside> div>

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

style type="text/css"> .layout { display: table; width: 100%; } .layout__col { text-align: center; display: table-cell; } .layout__col .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } 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 {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
style>

玩的方法三:去掉display: table(对应源码中的table_layout3.html)

依赖玩的方法二,能够试想一下是否能再把display: table那三个属性给去掉,反正浏览器还有恐怕会再增多框来包裹:

<div class="layout"> <aside class="layout__col layout__aside layout__aside--left">右左侧栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>中度扩充一些,旁边的冲天都会活动增添</div> <aside class="layout__col layout__aside layout__aside--right">侧面面栏宽度固定</aside> </div>

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

<style type="text/css"> .layout__col { text-align: center; display: table-cell; } .layout__col .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是:

图片 6

其一并从未达到咱们的功用,因为本身需求重视内容栏能够自适应宽度。产生这一个功能的缘由是何许,便是因为从没加展现display: table这一层,浏览器自动加了三个框,然则这么些框是行内框,导致重心内容栏展现的增长幅度就跟内容的上涨的幅度一致了。为了缓和那么些主题素材,能够那样干,html结构不改变,css稍加更换:

.layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; }

1
2
3
4
5
6
7
8
9
10
.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}
 
.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

根本的代码便是革命新扩展的这两行,首先给大旨内容栏设置叁个十分短的增长幅度,何况只可以用实际的长度设置,无法用百分比,然后给左边栏设置二个细小宽度,免得主体内容栏把左边栏的拉长率给挤掉了。这几个原理正是因为display: table-cell的意义,导致layout__main跟layout__aside表现出跟td成分同样的性状,td暗中认可的上涨的幅度正是可自动调解的,尽管宽度设置的非常大,也不会撑破table的拉长率,这里即便那么些自动抬高的框看不到,可是那些框的最大幅面约等于浏览器的宽度,layout__main不会打破那一个宽度的,所以可以放心使用。

玩的方法四:去掉layout这一层包裹成分(对应源码:table_layout4.html)

举个例子网址相比较轻松,去掉layout这一层包裹成分也是足以的:

<header>顶部</header> <aside class="layout__col layout__aside layout__aside--left">左边边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>中度扩张有个别,旁边的惊人都会自行扩展</div> <aside class="layout__col layout__aside layout__aside--right">右左边栏宽度固定</aside> <footer>底部</footer>

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

<style type="text/css"> .layout__col { text-align: center; display: table-cell; line-height: 50px; } .layout__col .layout__col { border-left: 10px solid #fff; } .layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </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__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

上述多种做法都能兑现我们想要的分栏等高布局,包容性方面,不牵挂IE8及以下,别的浏览器大约没反常。

是因为佚名表格的职能,导致接纳伪table布局的方法变得非常轻易,上文之所以没提到那个做法,是因为完全不清楚有佚名表格那回事,笔者也是写那篇作品才学习到的,学完事后,发掘又找到了三个做分栏布局的好点子,希望眼下的那个介绍能帮助你精通好这么些用法。实际上伪table的那一个属性,越发是table-cell,用途丰盛多,本文无法一一介绍,不过能提供八个思路,现在干活中大概有许多别样布局场景,大家都能够思考用table-cell来处理。

2. 圣杯布局的思想意识达成方式

选用圣杯布局的艺术,能够轻易完结上边包车型地铁布局功效:

图片 7

上边来所有人家表明上海体育场地中八种布局功能的实现方式(本文相关代码下载,本有的的布局方法在代码中对应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>

效果是:

图片 8

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>

效果是:

图片 9

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>

效果是:

图片 10

4)布局四:3栏布局,2个左侧栏同一时间一定在左臂,侧面是重头戏内容栏:

<div class="layout"> <aside class="layout__aside layout__aside--first">第二个右侧栏宽度固定</aside> <aside class="layout__aside layout__aside--second">第4个侧边栏宽度固定</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>

效果是:

图片 11

5)布局五:3栏搭架子,2个侧面栏同偶然候一定在右侧,左侧是大旨内容栏:

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

效果是:

图片 12

PS:

1)本文提供的那些布局方法,比网络收看的尤其从简一些,首倘使因为不牵挂包容IE8及以下,不思考把layout__main那个成分放在最前方,固然出色的做法都供给把layout__main做法放在前方,这样能够让网页主体内容优先渲染,小编感觉这种设想是完全多余的,2个因素的渲染顺序区别,实际上的用户体验差异又有多大呢,为了二个双眼看不到的歧异,而利用更复杂的做法,不值得;

2)css布局类的命名选拔了BEM的命名法则,那么些能够帮忙你写出结构化,标准化的css,风乐趣的能够去探听:

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

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>

效果:

图片 13

这种布局方法的性状是:

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>

效果:

图片 14

做法二:左边栏相对定位,主体内容栏保持流式布局(对应源码中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>

效果:

图片 15

以此点子的特色是:

1)主体内容栏是上涨的幅度自适应的;

2)全体栏也是一心等高的;

上面包车型地铁代码中,layout__main通过magin来给左侧栏留出空间,其实也能够在layout成分上增多padding来管理,作用是一模一样的。那么些艺术相比前三个艺术好一些的是,父成分的万丈能够因而宗旨内容栏给撑起来,可是通过也带动了二个新主题材料,就是内容栏中度缺乏的时候,左侧栏就能够师世溢出也许滚动,消除那一个新主题材料的艺术有2个:第一,假使侧面栏的剧情都是已知的,而且未有折叠张开这种会转移侧面栏内容惊人的作用,那么能够给layout设置二个min-height来管理;第二,假诺左侧栏的剧情是动态的,除了给layout加min-height之外,还得在每一次改换侧边栏内容的时候,主动去调节主体内容栏的可观,假使主体内容栏的冲天小于左侧栏的冲天,就要更新主体内容栏的万丈。但是只要您的内容栏的内容相当多,左边栏内容相当少的话,就绝不思虑那么些新主题材料了。

纯属定位的做法正是那样,第一种限制较高;第两种多少强一些,在有些光景下,恐怕还得凭仗JS来管理,所以综合起来不算是贰个不行好的方法。唯有你的布局须要恰好满意它的标准化时,大概才会设想动用它,就疑似上文中本人建议的类别一的急需,就应当要用相对定位的布局来做。

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才行,应当要复杂一点。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:圣杯布局小结,等高分栏布局小结

关键词: