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

作者: Alan Pearce

原文: Multi-Column Layouts Climb Out of the Box

地址: http://alistapart.com/articles/multicolumnlayouts

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

最近在研究一個兩個欄目的動態布局,每個欄目背景不同。我立刻想起了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的顔色保持一致。

垂直三欄布局擁有相同高度的方法(1)
作者: Alan Pearce原文: Multi-Column Layouts Climb Out of the Box地址: 我們都了解擁有相同高度的布局是很麻煩的事,有很多相關資料提到過相關設計方法,所以在這我就不多做解釋了。最近在研究一個兩個欄目的動態...查看完整版>>垂直三欄布局擁有相同高度的方法(1)
 
用CSS的float和clear進行三欄布局-css設計
三欄布局是最常見的網頁布局,主要頁內容放在中間一欄,邊上的兩欄放置導航鏈接之類的內容。基本布局一般是標題之下放置三欄,三欄占據整個頁面的寬度,最後在頁的底端放置頁腳,頁腳也占據整個頁面寬度。本文介紹一...查看完整版>>用CSS的float和clear進行三欄布局-css設計
 
CSS網頁布局實例:三欄等高布局-css設計
CSS網頁布局實例:三欄等高布局-css設計
  首先,三欄等高布局,顧名思義,可以概括爲以下特征:  1、3列(白癡也知道)  2、這3列高等相等  3、這3列的高度不是固定不變,而是隨著內容的變化而變化  Step 1:   xhtml代碼:  <div id="heade...查看完整版>>CSS網頁布局實例:三欄等高布局-css設計
 
最小高度100%頁腳保持在底部的布局方法
有時候,我們用CSS創建一個高度自適應布局,如何保證頁腳(footer)在內容不超過一屏的情況下始終保持在布局最下方是一個比較頭疼的事。我看過一些利用絕對定位的例子,但總感覺不是那麽完美,經過一下午的研究總結出...查看完整版>>最小高度100%頁腳保持在底部的布局方法
 
CSS實現未知高度圖文混合垂直居中
IE6,IE7,FF3測試通過CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*針對IE的hack*/ *position:relative; } #vertical_box_...查看完整版>>CSS實現未知高度圖文混合垂直居中
 
腳本控制三行三列自適應高度DIV布局
  這個例子是用JS腳本控制並列DIV的高度,通常在DIV布局中,自適應高度一直是比較頭疼的問題,一般大都采用背景圖、外套DIV、右欄覆蓋左欄......來解決。現在加了腳本後,簡單多了,假如有三個水平並列的DIV,fbox、m...查看完整版>>腳本控制三行三列自適應高度DIV布局
 
高度100%的絕對定位自適應布局
容器高度100%是經常用到的需求,任何容器都可以實現,而且不需要嵌套關系。把body看作是一個容器,做爲內部對象的上層標簽,他的高度設置爲100%是關鍵。最基本的例子* { margin:0; padding:0; border:0;}html,body {...查看完整版>>高度100%的絕對定位自適應布局
 
腳本控制三行三列自適應高度DIV布局
這個例子是用JS腳本控制並列DIV的高度,通常在DIV布局中,自適應高度一直是比較頭疼的問題,一般大都采用背景圖、外套DIV、右欄覆蓋左欄......來解決。現在加了腳本後,簡單多了,假如有三個水平並列的DIV,fbox、mbox、...查看完整版>>腳本控制三行三列自適應高度DIV布局
 
在HTML頁面中設置表格水平和垂直方向都居中的方法【原創】。
如果你想要你的網頁內容無論在什麽分辨率和任意浏覽器窗口大小的情況下都處于浏覽器中間的話,你可以把你的網頁內容全部放在一個表格之中,然後把這個表格設置爲垂直和水平方向上都居中。具體方法如下: (1)先...查看完整版>>在HTML頁面中設置表格水平和垂直方向都居中的方法【原創】。
 
 
回到王朝網路移動版首頁