Web頁面中八種創(chuàng)建多列等高(等高列布局)的實現(xiàn)技術(shù)
我要評論高度相等列在Web頁面設(shè)計中永遠(yuǎn)是一個網(wǎng)頁設(shè)計師的需求。如果所有列都有相同的背景色，高度相等還是不相等都無關(guān)緊要，因為你只要在這些列的父元素中設(shè)置一個背景色就可以了。但是，如果一個或多個列需要單獨設(shè)置自己的背景色，那么它的視覺完整性的設(shè)計就顯得非常重要了。大家都知道當(dāng)初Table實現(xiàn)等高列布局是多么的簡單，但是我們使用CSS來創(chuàng)建等高列布局并非是那么容易的事情。
如果一個設(shè)計是固定寬度（非流體的寬度設(shè)計），那么實現(xiàn)多列等高效果是相當(dāng)?shù)娜菀?。最好的技術(shù)就是使用Dan Cederholm 的Faux Columns 技術(shù)。只要制作一張合適的背景圖片，在你多列的父元素中進(jìn)行垂直鋪放，從而達(dá)到一種假像（假的多列等高布局效果）。但是在流體布局中要用CSS實現(xiàn)多列等高的設(shè)計那就不是那么容易的事情，因為我們沒有辦法在使用背景圖片來實現(xiàn)多列等高的假像了，那么是不是就沒有辦法實現(xiàn)了呢？那當(dāng)然不是那么回事了，不管是實現(xiàn)固定布局還是流體布局的等多列等高視覺效果，方法還是蠻多的，這些方法體現(xiàn)了CSS的不同技術(shù)，也各有千秋，下面我們就一起來探討Web頁面中的多列等高的實現(xiàn)技術(shù)。
下面要介紹的方法都是讓我們的布局如何實現(xiàn)多列的等高視覺效果，正如下圖所示：
這種方法是我們實現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進(jìn)行Y軸的鋪放，從而實現(xiàn)一種等高列的假像：
Html Markup
<div class=”container clearfix” >
<div class=”left” ></div>
<div class=”content” ></div>
<div class=”right” ></div>
</div>
在制作樣式之前需要一張類似下面的背景圖：
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;
}
優(yōu)點：
實現(xiàn)方法簡單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實現(xiàn)。
缺點：
使用這種方法不適合流體布局等高列的布局，另外如果你需要更換背景色或?qū)崿F(xiàn)其他列數(shù)的等高列時，都需要重新制作過背景圖。
二、給容器div使用單獨的背景色（固定布局）這種方法實現(xiàn)有點復(fù)雜，如果你理解其實現(xiàn)過程也是相當(dāng)?shù)暮唵?。這種方法我們主要給每一列的背景設(shè)在單獨的<div>元素上。這種方法的實現(xiàn)的原則是：任何<div>元素的最大高度來撐大其他的<div>容器高度。如下圖所示：
上圖中，不管我們哪一列的高度最高，那么其三個容器“rightBack,contentBack,leftBack”的高度相應(yīng)會隨最高列的高列變化，下面我們一起來看其實現(xiàn)過程：
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>
看起來蠻復(fù)雜吧？其實你只要了解了它是如何的工作原理就會變得非常簡單，你只要理解并掌握以下幾點：
用兩幅圖來展示其實現(xiàn)的過程：
下圖是實現(xiàn)上面的第二步對應(yīng)的示例圖，也就是容器“div.rightWrap”，“div.contentWrap”，“div.leftWrap”進(jìn)行相對定位（position: releative）,并展示了如何設(shè)置對應(yīng)的“right”值。
上圖虛線代表的范圍是可視范圍，其中有兩列背景將會溢出，解決這個只需要在最外層容器“div.rightWrap”加上“overflow:hidden”就可以進(jìn)行隱藏溢出的其他背景色。接下來下圖所展示的是上面所說的第五步：
前面我們對三個內(nèi)容元素都進(jìn)行了相對定位，現(xiàn)在只需要按第五步將其定位回去，如上圖所示。其實說到最后，你只要理解了這兩幅，你就什么都清楚了。
優(yōu)點：
這種方法是不需要借助其他東西（javascript,背景圖等）,而是純CSS和HTML實現(xiàn)的等高列布局，并且能兼容所有瀏覽器（包括IE6），并且可以很容易創(chuàng)建任意列數(shù)。
缺點：
這種方法不像其他方法一樣簡單明了，給你理解會帶來一定難度，但是只要你理解清楚了，將能幫你創(chuàng)建任意列數(shù)的等高布局效果。
三、給容器div使用單獨的背景色（流體布局）這種布局可以說是就是第二種布局方法，只是這里是一種多列的流體等高列的布局方法。前面也說過了，其實現(xiàn)原理就是給每一列添加相對應(yīng)用的容器，并進(jìn)行相互嵌套，并在每個容器中設(shè)置背景色。這里需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那么你就需要使用三個容器。如下圖所示：
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%;/*距左邊有三個padding為2%,所以距離變成76%*/
overflow: hidden;
}
#col3 {
float:left;
width:26%;/*增加了2%的padding，所以寬度減少4%*/
position: relative;
left: 80%;/*距左邊5個padding為2%，所以距離變成80%*/
overflow: hidden;
}
</style>
上面展示的是三列的，下面我們在來看一下兩列和更多列的模板：
兩列的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>
四列的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>
四列的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>
下面來看其實現(xiàn)過程，如果你理解了第二制作方法，那么這個你不用想一下就知道他們是一樣的道理，如果你對第二種方法還不夠清楚，那么你接著看這下面的內(nèi)容，你會更清楚他們是怎么一回事的。下面我們一起來看三列的實現(xiàn)過程：
上圖展示了，我們有三列，并且也說過了，這三列內(nèi)容都放在了三個容器的div中，我們每一列的背景色不是放在內(nèi)容列中，而是放置在容器中，現(xiàn)在我們需要通過對容器進(jìn)行相對定位，把背景顯示出來，而且我們這個容器是最外層的不能進(jìn)行相對定位的移動，具體的請看下圖：
上面我們把容器進(jìn)行了相對定位，這樣一來，我們內(nèi)容也相應(yīng)的做了移動，現(xiàn)在我們需要對頁面列的內(nèi)容也進(jìn)行相對定位，并把內(nèi)容和容器進(jìn)行相反方向的定位，這樣內(nèi)容和容器背景色就能對應(yīng)上了，請看下圖所展示的：
接下來我們需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden；這樣就OK了。
最后為了讓你的效果更加好看一點，你可以嘗試給他們加上padding，比如說每列加上2%的padding值，具體實現(xiàn)可以簡單從下圖中得到：
優(yōu)點：
兼容各瀏覽器，可以制作流體等高列，交無列數(shù)限制。
缺點：
標(biāo)簽使用較多，結(jié)構(gòu)過于復(fù)雜，不易于理解，不過你掌握了其原理也就不難了，這也不算太大缺點。
三、創(chuàng)建帶邊框的現(xiàn)列等高布局平常在制作中，我們需要制作兩列的等高效果，并且有一條邊框效果，那么這個實例我們就一起來看其實現(xiàn)方法：
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: -200px;
margin-right: -1px;
border-right: 1px solid #888;
position: relative;
}
#main {
float: left;
border-left: 1px solid #888;
}
#maing,
#sidebar{
padding-bottom: 2em;
}
</style>
優(yōu)點：
可以制作帶有邊框的兩列等高布局，并能兼容所有瀏覽器，結(jié)構(gòu)簡單明了。
缺點：
不適合于更多列的應(yīng)用，比如說三列以上，這樣的方法就行不通了。
四、使用正padding和負(fù)margin對沖實現(xiàn)多列布局方法這種方法很簡單，就是在所有列中使用正的上、下padding和負(fù)的上、下margin，并在所有列外面加上一個容器，并設(shè)置overflow:hiden把溢出背景切掉。下面一起來看代碼：
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: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
}
#right {
float: right;
margin-right: 0;
}
</style>
優(yōu)點：
這種可能實現(xiàn)多列等高布局，并且也能實現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器
缺點：
這種方法存在一個很大的缺陷，那就是如果要實現(xiàn)每列四周有邊框效果，那么每列的底部（或頂部）將無法有邊框效果。
下面我們就針對這個缺陷來介紹兩種解決辦法，第一種是使用背景圖來模仿底部（或頂部）邊框；第二種方法是使用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: -5px;
}
.column {
background: #ccc;
border: 1px solid #000;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
}
</style>
這種方法我們需要在外面增加一個層，并將背景圖放置在這個層的底部，而且需要制作一張和列邊框色一致，并且要先排列好他們之間的間距，如下圖所示：
這種方法有一個最大的不足之處就是，如果我們更改了列的邊框的顏色，或者改變了他們之間的間距，都需要重新制作過一張背景圖來重新模仿這樣的效果，下面一起來看看這種方法帶來的最后效果：
2、使用div來模仿列的邊框
我們這種方法是在列里面添加一個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: -32767px;
border: #f36 1px solid;
background: #AFAFAF;
}
.col2 {
float: right;
width: 208px;
padding-bottom: 32767px;
margin-bottom: -32767px;
border: #f36 1px solid;
background: #6F6F6F;
}
.colBottom1 {
position: absolute; /*相對于div.container*/
bottom: 0;
left: 0px;/*如果第一列左浮動就設(shè)置left:0;*/
height: 1px; /*當(dāng)前列的邊框?qū)挾?/
width: 730px;/*當(dāng)前列寬度+邊框?qū)挾?2 */
background: #f36;/*當(dāng)前列的邊框顏色*/
}
.colBottom2 {
position: absolute; /*相對于div.container*/
bottom: 0;
right: 0px; /*如果第二列右浮動就設(shè)置left:0;*/
height: 1px; /*當(dāng)前列的邊框?qū)挾?/
width: 210px; /*當(dāng)前列寬度+邊框?qū)挾?2 */
background: #f36;/*當(dāng)前列的邊框顏色*/
}
</style>
五、使用邊框和定位模擬列等高
這種方法是使用邊框和絕對定位來實現(xiàn)一個假的高度相等列的效果。假設(shè)你需要實現(xiàn)一個兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。如：
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>
優(yōu)點：
結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。
缺點：
這個方法就是無法單獨給主內(nèi)容列設(shè)置背景色，并且實現(xiàn)多列效果效果不佳。
六、邊框模仿等高列第五種方法我們無法實現(xiàn)主列的背景色設(shè)置，針對上面方法，稍作一下改良，這樣就可以實現(xiàn)主內(nèi)容也設(shè)置顏色的效果了
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; /* 邊框大小和顏色設(shè)置和right大小與顏色一樣 */
margin-right:-220px; /*此負(fù)邊距大小與right邊欄寬度一樣*/
float:left;
}
#right{
background-color:#f00;
width:220px;
float:left;
}
</style>
下面我們在此基礎(chǔ)上改變流體布局：
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:-220px;
float:left;
}
#sidebar{
background-color:#f00;
width:220px;
float:left;
margin-right:-220px;
}
</style>
上面主要展示了這種方法的二列布局，下面我們在來看看三列布局的用法
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; /* 邊框大小等于左邊欄寬度，顏色和左邊欄背景色一致*/
border-right:220px solid #f00;/* 邊框大小等于右邊欄寬度，顏色和右邊欄背景色一致*/
}
#left{
float:left;
width:220px;
margin-left:-220px;
position:relative;
}
#content{
float:left;
width:520px;
margin-right:-520px;
}
#right{
float:right;
width:220px;
margin-right:-220px;
position:relative;
}
</style>
接著在看一個三列自適應(yīng)布局
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:-220px;
margin-right:-220px;
display:inline; /* So IE plays nice */
}
#left{
float:left;
width:220px;
margin-left:-220px;
position:relative;
}
#content{
float:left;
width:100%;
margin-right:-100%;
}
#right{
float:right;
width:220px;
margin-right:-220px;
position:relative;
}
</style>
優(yōu)點：
能兼容所有瀏覽器效果，結(jié)構(gòu)簡單明了，容易掌握。
缺點：
列數(shù)受到極限，超過三列不好控制。
七、模仿表格布局實列等高列效果這種方法只適合現(xiàn)代瀏覽器，本不想介紹的，不過還是順便列出讓大家參考一下吧：
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>
優(yōu)點：
這是一種非常簡單，易于實現(xiàn)的方法。
缺點：
兼容性不好，在ie6-7無法正常運行。
八、jQuery和javascript大法最后要給大家介紹的是使用jQuery和javascript方法來實現(xiàn)多列的布局效果。
1、jQuery實現(xiàn)方法:
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);
}
//調(diào)用寫好的插件，基中“.container > div”是你需要實現(xiàn)的等高列
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代碼，你需要在需要實現(xiàn)等高列的div中加上"column"類名，這樣才會有效果的。
2、JavaScript方法
上面是jQuery的實現(xiàn)方法，接下來看看javaScript的實現(xiàn)方法：
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>
上面八大種方法就是我今天要跟大家一起分享的等高列的布局方法，他們之間更有千秋，希望能給需要的您帶來一定的幫助。篇幅過長，慢慢看吧，上面的代碼都是經(jīng)過測試的，兼容各大瀏覽器，可以直接復(fù)制代碼使用。
相關(guān)文章
CSS3 最強(qiáng)二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強(qiáng)的二維布局系統(tǒng),可以同時對列和行進(jìn)行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強(qiáng)二維布局系2025-02-27- 本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同2025-02-27
CSS3模擬實現(xiàn)一個雷達(dá)探測掃描動畫特效(最新推薦)
文章介紹了如何使用CSS3實現(xiàn)一個雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,2025-02-21- CSS3的Flexbox是一種強(qiáng)大的布局模式,通過設(shè)置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本2025-02-19
css3 實現(xiàn)icon刷新轉(zhuǎn)動效果
本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一2025-02-19- CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設(shè)置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans2025-02-19
CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼
本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式2025-02-19- 這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-02-13
CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼
本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細(xì)節(jié)和效果，感興趣的朋2025-02-11使用CSS3和SVG創(chuàng)建圓形進(jìn)度條動畫效果
CSS3和SVG的結(jié)合使用為網(wǎng)頁設(shè)計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進(jìn)度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體2024-10-24
