垂直三欄布局擁有相同高度的方法(1)

作者: Alan Pearce 原文: Multi-Column Layouts Climb Out of the Box 地址: [url=http://alistapart.com/articles/multicolumnlayouts]http://alistapart.com/articles/multicolumnlayouts[/url] 我們都了解擁有相同高度的布局是很麻煩的事，有很多相關資料提到過相關設計方法，所以在這我就不多做解釋了。 最近在研究一個兩個欄目的動態布局，每個欄目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一個動態布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要許多注釋和程序。甚至考慮用JavaScrip來實現欄目始終保持同一高度，但是不行。絕望之余，幾乎要用table布局，不，一定還有更好的方法。我想著一個問題「盒子外面是什麽」，border！如果我可以使「sidebar」（或"rail"）的div相對與「content」的div浮動，就可以實現多欄目相同高度。這個方法在很多地方介紹過：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發展而來，用更簡潔清楚的代碼 實現了兩個欄目的動態變化。下面是代碼： HTML: <div id="container"> <div id="content">This is<br />some content</div> <div id="rail">This is the rail</div> </div> CSS: #container{ background-color:#0ff; overflow:hidden; width:750px; } #content{ background-color:#0ff; width:600px; border-right:150px solid #f00; &raquo; /* 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的顔色設定和content div一樣，如果rail div達到最高，container隨之變高，這樣就給我們content變高的效果。 看看效果。See it in action 。試改變字體大小，布局隨之變化。 3個欄目：3個顔色 3個欄目的布局有點不同:直接給container div加border. HTML: <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: #container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; &raquo; /* The width and color of the left rail */ border-right:200px solid #f00; &raquo; /* 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始終沿中間欄目的左沿浮動，使旁邊欄目在真確的位置顯示。還有一些方法可以實現，但這個方法最好，更易實現流動布局（動態布局）。 因爲邊欄在container div外，浮動在border上。使用overflow: hidden使之隱藏：IE不支持，Firefox可以實現。邊欄不需要設置顔色，它會于container div的顔色保持一致。