Web网页页面中8种建立两列等高(等高列合理布局

2021-01-20 12:21 jianzhan

高宽比相同列在Web网页页面设计方案中始终是1个网页页面设计方案师的要求。假如全部列都有同样的情况色,高宽比相同還是不相同都不相干紧要,由于你要是在这些列的父元素中设定1个情况色便可以了。可是,假如1个或好几个列必须独立设定自身的情况色,那末它的视觉效果详细性的设计方案就显得十分关键了。大伙儿都了解当初Table完成等高列合理布局是多么的的简易,可是大家应用CSS来建立等高列合理布局并不是是那末非常容易的事儿。

假如1个设计方案是固定不动宽度(非流体的宽度设计方案),那末完成两列等高效率果是非常的非常容易。最好是的技术性便是应用Dan Cederholm 的Faux Columns 技术性。要是制做1张适合的情况照片,在你两列的父元素中开展竖直铺放,从而做到1种假像(假的两列等高合理布局实际效果)。可是在流体合理布局中要用CSS完成两列等高的设计方案那就并不是那末非常容易的事儿,由于大家沒有方法在应用情况照片来完成两列等高的假像了,那末是否就沒有方法完成了呢?那自然并不是那末回事了,无论是完成固定不动合理布局還是流体合理布局的等两列等高视觉效果实际效果,方式還是蛮多的,这些方式反映了CSS的不一样技术性,也各有不同,下面大家就1起来讨论Web网页页面中的两列等高的完成技术性。

下面要详细介绍的方式全是让大家的合理布局怎样完成两列的等高视觉效果实际效果,正以下图所示:

1、假等高列

这类方式是大家完成等高列最开始应用的1种方式,便是应用情况照片,在列的父元素上应用这个情况图开展Y轴的铺放,从而完成1种等高列的假像:

Html Markup

拷贝编码
编码以下:

<div class=”container clearfix” >
<div class=”left” ></div>
<div class=”content” ></div>
<div class=”right” ></div>
</div>

在制做款式以前必须1张相近下面的情况图:

CSS Code:

拷贝编码
编码以下:

.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float:left;
width: 220px;
}

优势:

完成方式简易,适配性强,不必须太多的css款式便可以轻轻松松完成。

缺陷:

应用这类方式不合适流体合理布局等高列的合理布局,此外假如你必须拆换情况色或完成别的列数的等高列时,都必须再次制做过情况图。

2、给器皿div应用独立的情况色(固定不动合理布局)

这类方式完成有点繁杂,假如你了解实际上现全过程也是非常的简易。这类方式大家关键给每列的情况设在独立的<div>元素上。这类方式的完成的标准是:任何<div>元素的最大高宽比来撑大别的的<div>器皿高宽比。以下图所示:

上图中,无论大家哪1列的高宽比最高,那末其3个器皿“rightBack,contentBack,leftBack”的高宽比相应会随最高列的高列转变,下面大家1起看来实际上现全过程:

Html Markup

拷贝编码
编码以下:

<div class="container" >
<div class="rightWrap" >
<div class="contentWrap" >
<div class="leftWrap" >
<div class="aside column leftSidebar" id="left" ></div>
<div id="content" class="column section" ></div>
<div class="aside rightSidebat column" id="right" ></div>
</div>
</div>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
.container {
width: 960px;
margin: 0 auto;
}
.rightWrap {
width: 100%;
float: left;
background: green;
overflow: hidden;
position: relative;
}

.contentWrap {
float: left;
background: orange;
width: 100%;
position: relative;
right: 320px;/*此值等于rightSidebar的宽度*/
}

.leftWrap{
width: 100%;
background: lime;
float:left;
position: relative;
right: 420px;/*此值等于Content的宽度*/
}
#left {
float: left;
width: 220px;
overflow: hidden;
position: relative;
left: 740px;
}
#content {
float: left;
width: 420px;
overflow: hidden;
position:relative;
left: 740px;
}
#right {
float: left;
overflow: hidden;
width: 320px;
position: #333;
position: relative;
left: 740px;
}
</style>

看起来蛮繁杂吧?实际上你要是掌握了它是怎样的工作中基本原理就会变得十分简易,你要是了解并把握下列几点:

“div.rightWrap”、“div.contentWrap”、“div.leftWrap”全是1个封闭式的器皿;而“div#left”、“div#content”、“div#right”便是大家所说的列,里边放了內容; 每个器皿对应1列的情况色(用来置放情况色或情况照片);此例对应的是:“div.rgithWrap”用来完成“div#right”列的情况色;“div.contentWrap”用来完成“div#content”列的情况色;“div.leftWrap”用来完成“div#left”列的情况色;除最外面的器皿(也便是对应的最左列器皿)外,我都都对她们开展相对性精准定位,而且设定其“right”值,此值并和相对性应的列宽相同。此例中“div.contentWrap”对应的恰好是“div#right”的宽度;而“div.leftWrap”对运用的恰好是“div#content”的宽度;给每列开展左波动,并设定其列宽给每列设定相对性精准定位,并开展“left”设定,并且“left”的值等于除第1列的全部列宽的和。此例中“left”的值等于“div#right”和“div#content”多列的宽度之和,也便是320px+420=740px

用两幅图来展现实际上现的全过程

下图是完成上面的第2步对应的示例图,也便是器皿“div.rightWrap”,“div.contentWrap”,“div.leftWrap”开展相对性精准定位(position: releative),并展现了怎样设定对应的“right”值。

上图虚线意味着的范畴是可视性范畴,在其中有多列情况可能外溢,处理这个只必须在最外层器皿“div.rightWrap”再加“overflow:hidden”便可以开展掩藏外溢的别的情况色。接下来下图所展现的是上面所说的第5步:

前面大家对3个內容元素都开展了相对性精准定位,如今只必须按第5步将其精准定位回去,如上图所示。实际上说到最终,你要是了解了这两幅,你就甚么都清晰了。

优势:

这类方式是不必须依靠别的物品(javascript,情况图等),而是纯CSS和HTML完成的等高列合理布局,而且能适配全部访问器(包含IE6),而且能够很非常容易建立随意列数。

缺陷:

这类方式不像别的方式1样简易明了,给你了解会带来1定难度,可是要是你了解清晰了,将能帮你建立随意列数的等高合理布局实际效果。

3、给器皿div应用独立的情况色(流体合理布局)

这类合理布局能够说是便是第2种合理布局方式,只是这里是1种两列的流体等高列的合理布局方式。前面也说过了,实际上现基本原理便是给每列加上相对性运用的器皿,并开展互相嵌套循环,并在每一个器皿中设定情况色。这里必须提示大伙儿你有是多少列就必须是多少个器皿,例如说大家说的3列,那末你就必须应用3个器皿。以下图所示:

HTML Markup

拷贝编码
编码以下:

<div id="container3" >
<div id="container2" >
<div id="container1" >
<div id="col1" >Column 1 </div>
<div id="col2" >Column 2 </div>
<div id="col3" >Column 3 </div>
</div>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#container3 {
float: left;
width: 100%;
background: green;/**/
overflow: hidden;
position: relative;
}

#container2 {
float: left;
width: 100%;
background: yellow;
position: relative;
right: 30%; /*尺寸等于col3的宽度*/
}

#container1 {
float: left;
width: 100%;
background: orange;
position: relative;
right: 40%;/*尺寸等于col2的宽度*/
}

#col1 {
float:left;
width:26%;/*提升了2%的padding,因此宽度降低4%*/
position: relative;
left: 72%;/*距左侧呀提升2%就成72%*/
overflow: hidden;
}
#col2 {
float:left;
width:36%;/*提升了2%的padding,因此宽度降低4%*/
position: relative;
left: 76%;/*距左侧有3个padding为2%,因此间距变为76%*/
overflow: hidden;
}
#col3 {
float:left;
width:26%;/*提升了2%的padding,因此宽度降低4%*/
position: relative;
left: 80%;/*距左侧5个padding为2%,因此间距变为80%*/
overflow: hidden;
}
</style>

上面展现的是3列的,下面大家在看来1下多列和更两列的模版:

多列的HTML Markup:

拷贝编码
编码以下:

<div id="container2" >
<div id="container1" >
<div id="col1" >Column 1 </div>
<div id="col2" >Column 2 </div>
</div>
</div>

多列的CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
right:30%;
}
#col1 {
width: 66%;
float: left;
position: relative;
left: 32%;
}
#col2 {
width: 26%;
float: left;
position: relative;
left: 36%;
}
</style>

4列的HTML Markup:

拷贝编码
编码以下:

<div id="container4" >
<div id="container3" >
<div id="container2" >
<div id="container1" >
<div id="col1" >col1</div>
<div id="col2" >col2</div>
<div id="col3" >col3</div>
<div id="col4" >col4</div>
</div>
</div>
</div>
</div>

4列的CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#container4 {
float: left;
width: 100%;
background: green;
position: relative;
overflow: hidden;
}

#container3 {
float: left;
width: 100%;
background: #B2F0F9;
position: relative;
right: 20%;/*此值等于col4的宽度*/
}

#container2 {
float: left;
width: 100%;
background: #89FFA2;
position: relative;
right: 30%;/*此值等于col3的宽度*/
}

#container1 {
float: left;
width: 100%;
background: #369;
position: relative;
right: 30%;/*此值等于col2的宽度*/
}

#col1 {
width: 18%;/*1%的padding*/
float: left;
position: relative;
left: 81%;
overflow: hidden;
}

#col2 {
float: left;
width: 28%;
position: relative;
left: 83%;
overflow: hidden;
}

#col3 {
float: left;
width: 28%;
position: relative;
left: 85%;
overflow: hidden;
}

#col4 {
float: left;
width: 18%;
position: relative;
left: 87%;
overflow: hidden;
}
</style>

下面看来实际上现全过程,假如你了解了第2制做方式,那末这个你无需想1下就了解她们是1样的道理,假如你对第2种方式还不足清晰,那末你接着看这下面的內容,你会更清晰她们是如何1回事的。下面大家1起看来3列的完成全过程:

上图展现了,大家有3列,而且也说过了,这3列內容都放在了3个器皿的div中,大家每列的情况色并不是放在內容列中,而是置放在器皿中,如今大家必须根据对器皿开展相对性精准定位,把情况显示信息出来,并且大家这个器皿是最外层的不可以开展相对性精准定位的挪动,实际的请看下图:

上面大家把器皿开展了相对性精准定位,这样1来,大家內容也相应的做了挪动,如今大家必须对网页页面列的內容也开展相对性精准定位,并把內容和器皿开展相反向的精准定位,这样內容和器皿情况色就可以对应到了,请看下图所展现的:

接下来大家必须把外溢的一部分切掉去,和前面1相,在最外面的器皿再加overflow:hidden;这样就OK了。

最终以便让你的实际效果更为漂亮1点,你能够尝试给她们再加padding,例如说每列再加2%的padding值,实际完成能够简易从下图中获得:

优势:

适配各访问器,能够制做流体等高列,交无列数限定。

缺陷:

标识应用较多,构造过度繁杂,不容易于了解,但是你把握了其基本原理也就不难了,这也不算太大缺陷。

3、建立带边框的现列等高合理布局

平时在制做中,大家必须制做多列的等高效率果,而且有1条边框实际效果,那末这个案例大家就1起看来实际上现方式:

Html Code

拷贝编码
编码以下:

<div id="wrapper" >
<div id="sidebar" >
.....
</div>
<div id="main" >
....
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
html {
background: #45473f;
height: auto;
}

body {
width: 960px;
margin: 20px auto;
background: #ffe3a6;
border: 1px solid #efefef;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;
position:relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: ⑵00px;
margin-right: ⑴px;
border-right: 1px solid #888;
position: relative;
}
#main {
float: left;
border-left: 1px solid #888;
}
#maing,
#sidebar{
padding-bottom: 2em;
}
</style>

优势:

能够制做带有边框的多列等高合理布局,并能适配全部访问器,构造简易明了。

缺陷:

不合适于更两列的运用,例如说3列以上,这样的方式就行堵塞了。

4、应用正padding和负margin对冲完成两列合理布局方式

这类方式很简易,便是在全部列中应用正的上、下padding和负的上、下margin,并在全部例外面再加1个器皿,并设定overflow:hiden把外溢情况切掉。下面1起看来编码:

HTML Markup:

拷贝编码
编码以下:

<div id="container" >
<div id="left" class="column aside" >
<p>Sidebar</p>
</div>
<div id="content" class="column section" >
<p>Main content </p>
</div>
<div id="right" class="column aside" >
<p>Sidebar</p>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >

#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

.column {
background: #ccc;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: ⑼9999px;
padding-bottom: 99999px;
}

#content {
background: #eee;
}

#right {
float: right;
margin-right: 0;
}
</style>

优势:

这类将会完成两列等高合理布局,而且也能完成列与列之间隔开线实际效果,构造简易,适配全部访问器

缺陷:

这类方式存在1个很大的缺点,那便是假如要完成每列4周有边框实际效果,那末每列的底部(或顶部)将没法有边框实际效果。

下面大家就对于这个缺点来详细介绍两种处理方法,第1种是应用情况图来效仿底部(或顶部)边框;第2种方式是应用div来效仿列的边框,下面大家看来这两种方式:

1、情况图效仿边框实际效果:

Html Code:

拷贝编码
编码以下:

<div id="containerOuter" >
<div id="containerInner" >
<div id="left" class="column aside" >
<p>Sidebar</p>
</div>
<div id="content" class="column section" >
<p>Main content </p>
</div>
<div id="right" class="column aside" >
<p>Sidebar</p>
</div>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#containerOuter {
background: url("images/bg.gif") no-repeat center bottom;
width: 616px;
margin: 0 auto;
padding-bottom: 1px;
overflow: hidden;
}

#containerInner {
float: left;
overflow: hidden;
margin-right: ⑸px;
}

.column {
background: #ccc;
border: 1px solid #000;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: ⑼9999px;
padding-bottom: 99999px;
}

#content {
background: #eee;
}
</style>

这类方式大家必须出外面提升1个层,并将情况图置放在这个层的底部,并且必须制做1张和列边框色1致,而且要先排序好她们之间的间隔,以下图所示:

这类方式有1个最大的不够的地方便是,假如大家变更了列的边框的色调,或更改了她们之间的间隔,都必须再次制做过1张情况图来再次效仿这样的实际效果,下面1起看来看这类方式带来的最终实际效果:

2、应用div来效仿列的边框

大家这类方式是在列里边加上1个div,用这个div来效仿边框的实际效果,实际看编码吧:

Html Code:

拷贝编码
编码以下:

<div class="wrapper" >
<div class="container" >
<div class="col1" >
<div class="colBottom1" ><!-- ie needs this comment for small div heights -- ></div>
</div>
<div class="col2" >
<div class="colBottom2" ><!-- ie needs thiscomment for small div heights -- ></div>
</div>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
.wrapper {
width: 960px;
margin: 0 auto;
}
.container {
position: relative;
overflow: hidden;
zoom: 1;
} /* zoom fix for ie6 */
.col1 {
float: left;
width: 728px;
padding-bottom: 32767px;
margin-bottom: ⑶2767px;
border: #f36 1px solid;
background: #AFAFAF;
}
.col2 {
float: right;
width: 208px;
padding-bottom: 32767px;
margin-bottom: ⑶2767px;
border: #f36 1px solid;
background: #6F6F6F;
}
.colBottom1 {
position: absolute; /*相对div.container*/
bottom: 0;
left: 0px;/*假如第1列左波动就设定left:0;*/
height: 1px; /*当今列的边框宽度*/
width: 730px;/*当今列宽度+边框宽度*2 */
background: #f36;/*当今列的边框色调*/
}
.colBottom2 {
position: absolute; /*相对div.container*/
bottom: 0;
right: 0px; /*假如第2列右波动就设定left:0;*/
height: 1px; /*当今列的边框宽度*/
width: 210px; /*当今列宽度+边框宽度*2 */
background: #f36;/*当今列的边框色调*/
}
</style>

5、应用边框和精准定位仿真模拟列等高

这类方式是应用边框和肯定精准定位来完成1个假的高宽比相同列的实际效果。假定你必须完成1个多列等高合理布局,侧栏高宽比要和主內容高宽比相同。如:

Html Code:

拷贝编码
编码以下:

<div id="wrapper" >
<div id="mainContent" >...</div>
<div id="sidebar" >...</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#wrapper {
width: 960px;
margin: 0 auto;
}

#mainContent {
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
}

#sidebar {
background: #dfdfdf;
margin-left: 740px;
position: absolute;
width: 220px;
}
</style>

优势:

构造简易,适配各访问器,非常容易把握。

缺陷:

这个方式便是没法独立给主內容列设定情况色,而且完成两列实际效果实际效果不佳。

6、边框效仿等高列

第5种方式大家没法完成主列的情况色设定,对于上面方式,稍作1下改进,这样便可以完成主內容也设定色调的实际效果了

CSS Html:

拷贝编码
编码以下:

<div id="container" >
<div id="content" >This is <br / >some content </div>
<div id="right" >This is the right </div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#container{
background-color:#0ff;
overflow:hidden;
width:960px;
margin: 0 auto;
}
#content{
background-color:#0ff;
width:740px;
border-right:220px solid #f00; /* 边框尺寸和色调设定和right尺寸与色调1样 */
margin-right:⑵20px; /*此负边距尺寸与right边栏宽度1样*/
float:left;
}
#right{
background-color:#f00;
width:220px;
float:left;
}
</style>

下面大家在此基本上更改流体合理布局:

HTML Markup

拷贝编码
编码以下:

<div id="container" >
<div id="content" >Main content section </div>
<div id="sidebar" >Right Sidebar </div>
</div>
<style type="text/css" >
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:220px; /* 宽度尺寸等与边栏宽度尺寸*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:220px solid #f00;
margin-right:⑵20px;
float:left;
}
#sidebar{
background-color:#f00;
width:220px;
float:left;
margin-right:⑵20px;
}
</style>

上面关键展现了这类方式的2列合理布局,下面大家在看来看3列合理布局的用法

HTML Markup

拷贝编码
编码以下:

<div id="containerOuter" >
<div id="container" >
<div id="content" >Main content section </div>
<div id="left" >LEFT sidebar </div>
<div id="right" >RIGHT sidebar </div>
</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
#containerOuter {
margin: 0 auto;
width: 960px;
}
#container{
background-color:#0ff;
float:left;
width:520px;
border-left:220px solid #0f0; /* 边框尺寸等于左侧栏宽度,色调和左侧栏情况色1致*/
border-right:220px solid #f00;/* 边框尺寸等于右侧栏宽度,色调和右侧栏情况色1致*/
}
#left{
float:left;
width:220px;
margin-left:⑵20px;
position:relative;
}
#content{
float:left;
width:520px;
margin-right:⑸20px;
}
#right{
float:right;
width:220px;
margin-right:⑵20px;
position:relative;
}
</style>

接着在看1个3列自融入合理布局

Html Markup

拷贝编码
编码以下:

<div id="container" >
<div id="content" >Main Content </div>
<div id="left" >Left Sidebar </div>
<div id="right" >Right Sidebar </div>
</div>

CSS Code

拷贝编码
编码以下:

<style type="text/css" >
body{
margin:0 100px;
padding:0 220px 0 220px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:220px solid #0f0;
border-right:220px solid #f00;
margin-left:⑵20px;
margin-right:⑵20px;
display:inline; /* So IE plays nice */
}
#left{
float:left;
width:220px;
margin-left:⑵20px;
position:relative;
}
#content{
float:left;
width:100%;
margin-right:⑴00%;
}
#right{
float:right;
width:220px;
margin-right:⑵20px;
position:relative;
}
</style>

优势:

能适配全部访问器实际效果,构造简易明了,非常容易把握。

缺陷:

列数遭受极限,超出3列不太好操纵。

7、效仿报表合理布局实列等高列实际效果

这类方式只合适当代访问器,本不想详细介绍的,但是還是顺带列转让大伙儿参照1下吧:

HTML Markup:

拷贝编码
编码以下:

<div class="container table" >
<div class="containerInner tableRow" >
<div class="column tableCell cell1" >
<div class="left aside" >
....
</div>
</div>

<div class="column tableCell cell2" >
<div class="content section" >
...
</div>
</div>

<div class="column tableCell cell3" >
<div class="right aside" >
...
</div>
</div>

</div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display:table;
}

.tableRow {
display: table-row;
}

.tableCell {
display: table-cell;
width: 33%;
}

.cell1 {
background: #f00;
}

.cell2 {
background: #0f0;
}

.cell3 {
background: #00f;
}
</style>

优势:

这是1种十分简易,易于完成的方式。

缺陷:

适配性不太好,在ie6⑺没法一切正常运作。

8、jQuery和javascript大法

最终要给大伙儿详细介绍的是应用jQuery和javascript方式来完成两列的合理布局实际效果。

1、jQuery完成方式:

Html Markup

拷贝编码
编码以下:

<div class="container" >
<div id="left" class="aside leftSidebar" ></div>
<div id="content" class="section" ></div>
<div id="right" class="aside rightSidebar" ></div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
.contanier {
width: 960px;
margin: 0 auto;
}

.aside,
.section {
float:left;
width: 33%;
background: lime;
}

.leftSidebar {background: orange;}
.section { background: green;}
</style>

jQuery Code:

拷贝编码
编码以下:

<script type="text/javascript" >
$(document).ready(function(){
//等高列的小软件
function setEqualHeight(columns) {
var tallestColumn = 0;
columns.each(function(){
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
//启用写好的软件,基中“.container > div”是你必须完成的等高列
setEqualHeight($(".container > div"));
});
</script>

你还可以把上面的jQuery编码换为下面的

拷贝编码
编码以下:

<script type="text/javascript" >
$(document).ready(function(){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$('.column').each(function() {
$el = $(this);
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});​
});
</script>

假如你应用上面这个jQuery编码,你必须在必须完成等高列的div中再加"column"类名,这样才会合理果的。

2、JavaScript方式

上面是jQuery的完成方式,接下看来看javaScript的完成方式:

Html Markup:

拷贝编码
编码以下:

<div class="contanier" >
<div class="column" id="left" ></div>
<div id="content" class="column" ></div>
<div id="right" class="column" ></div>
</div>

CSS Code:

拷贝编码
编码以下:

<style type="text/css" >
.contanier {
width: 960px;
margin: 0 auto;
}

#left {
width: 220px;
float: left;
margin-right: 20px;
background: green;
}

#content {
width: 480px;
float: left;
margin-right: 20px;
background: lime;
}

#right {
width: 220px;
float: right;
background: orange;
}
</style>

Javascript Code:

拷贝编码
编码以下:

<script type="text/javascript">
function matchColumns(classname){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName('div');
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i <divs.length;i++){
// make collection with <div> elements with class attribute 'container'
if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i <contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
// Runs the script when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchColumns('column'); // class=maincolumn
}
}
</script>

上面8大种方式便是我今日要跟大伙儿1起共享的等高列的合理布局方式,她们之间更有千秋,期待能给必须的您带来1定的协助。篇数太长,渐渐地看吧,上面的编码全是历经检测的,适配各大访问器,能够立即拷贝编码应用。