實現(xiàn)三列布局相同高度的解決辦法_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　作者: Alan Pearce　原文: Multi-Column Layouts Climb Out of the Box

　　我們都了解擁有相同高度的布局是很麻煩的事，有很多相關(guān)資料提到過相關(guān)設(shè)計方法，所以在這我就不多做解釋了。

　　最近在研究一個兩個欄目的動態(tài)布局，每個欄目背景不同。我馬上想起了Dan Cederholm的Faux Columns，但我仍然需要一個動態(tài)布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要許多注釋和程序。甚至考慮用JavaScrip來實現(xiàn)欄目始終保持同一高度，但是不行。絕望之余，幾乎要用table布局，不，一定還有更好的方法。我想著一個問題“盒子外面是什么”，border！假如我可以使“sidebar”（或"rail"）的div相對與“content”的div浮動，就可以實現(xiàn)多欄目相同高度。這個方法在很多地方介紹過：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發(fā)展而來，用更簡潔清楚的代碼實現(xiàn)了兩個欄目的動態(tài)變化。

HTML代碼:

示例代碼 [m.ghpqjb.com]

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

CSS代碼:

示例代碼 [m.ghpqjb.com]

#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}

　　給content div右加border，顏色寬度和rail一樣，并相對與rail浮動。Margin:-150px;使rail div移到margin騰出的空間。假如content div變的比rail div 高，border隨content div變高。視覺效果就是似乎rail div也在變高。container的顏色設(shè)定和content div一樣，假如rail div達(dá)到最高，container隨之變高，這樣就給我們content變高的效果。
　　看看效果。See it in action 。試改變字體大小，布局隨之變化。

　　3個欄目：3個顏色
　　3個欄目的布局有點不同:直接給container div加border.

HTML代碼:

示例代碼 [m.ghpqjb.com]

<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>

CSS代碼:

示例代碼 [m.ghpqjb.com]

#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}

　　中間的欄目margin-right:-150px 使左邊的rail div始終沿中間欄目的左沿浮動，使旁邊欄目在真確的位置顯示。還有一些方法可以實現(xiàn)，但這個方法最好，更易實現(xiàn)流動布局（動態(tài)布局）。

　　因為邊欄在container div外，浮動在border上。使用overflow: hidden使之隱藏：IE不支持，F(xiàn)irefox可以實現(xiàn)。邊欄不需要設(shè)置顏色，它會于container div的顏色保持一致。

　　流動布局

　　了解定寬布局之后，我嘗試把這個方法用到動態(tài)布局中去。邊欄仍然需要設(shè)置固定寬，很多瀏覽器不支持border:**%的屬性。但是我門可以使中間欄目自適應(yīng)。

CSS代碼:

示例代碼 [m.ghpqjb.com]

#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}

　　3個欄目自適應(yīng)布局　方法簡單，不需要引用圖片，沒有BUG.

HTML代碼:

示例代碼 [m.ghpqjb.com]

<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</div>

CSS代碼:

示例代碼 [m.ghpqjb.com]

body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}

運行效果:

代碼調(diào)試框 [m.ghpqjb.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css</title>
<style type="text/css">

body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;
  width:100%;    
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* So IE plays nice */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

</style>
</head>

<body>
<div   class="4gqkqe0"   id="container">
  <div   class="uuc0o0e"   id="center">Center Column Content</div>
  <div   class="aewqkm2"   id="leftRail">Left<br /> Sidebar</div>
  <div   class="gaumuik"   id="rightRail">Right Sidebar</div>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　作者: Alan Pearce　原文: Multi-Column Layouts Climb Out of the Box
　　地址:http://alistapart.com/articles/multicolumnlayouts
　　