欧美日韩精品在线,国内精品久久久久久久久,一级毛片恃级毛片直播,清纯唯美亚洲综合欧美色

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

編輯Tag賺U幣
教程Tag：暫無Tag,歡迎添加,賺取U幣!
　　作者: Alan Pearce　原文: Multi-Column Layouts Climb Out of the Box

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

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

HTML代碼:

示例代碼 [m.dounai2.com]
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>

CSS代碼:

示例代碼 [m.dounai2.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一樣，并相對(duì)與rail浮動(dòng)。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個(gè)欄目：3個(gè)顏色
　　3個(gè)欄目的布局有點(diǎn)不同:直接給container div加border.

HTML代碼:

示例代碼 [m.dounai2.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.dounai2.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始終沿中間欄目的左沿浮動(dòng)，使旁邊欄目在真確的位置顯示。還有一些方法可以實(shí)現(xiàn)，但這個(gè)方法最好，更易實(shí)現(xiàn)流動(dòng)布局（動(dòng)態(tài)布局）。

　　因?yàn)檫厵谠赾ontainer div外，浮動(dòng)在border上。使用overflow: hidden使之隱藏：IE不支持，F(xiàn)irefox可以實(shí)現(xiàn)。邊欄不需要設(shè)置顏色，它會(huì)于container div的顏色保持一致。

　　流動(dòng)布局

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

CSS代碼:

示例代碼 [m.dounai2.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個(gè)欄目自適應(yīng)布局　方法簡(jiǎn)單，不需要引用圖片，沒有BUG.

HTML代碼:

示例代碼 [m.dounai2.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.dounai2.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;
}

運(yùn)行效果:

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

[ 可先修改部分代碼 再運(yùn)行查看效果 ]

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

來源：無憂整理//所屬分類：DIV+CSS實(shí)例/更新時(shí)間：2007-03-30
相關(guān)DIV+CSS實(shí)例：