CSS布局例項 上中下三行,中間自適應

css布局例項:上中下三行布局，上下定高，中間欄自適應瀏覽器高度，且內容垂直居中。本文**在firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 測試通過。對於非ie核心瀏覽器，通過設定display:table、display:table-row和display:table-cell來模擬**的表現形式。

最外層#box ，高度100%，其子層#header/#main/#footer為，因此可以模擬**的行效果，上下定高，則中間不定高的層自適應高度。

#wrap層為模擬單元格，因此可以設定，垂直居中。

由於win ie不支援，因此，只能採取定位的方式實現。內是針對ie的設定。

以下是引用片段：

聖杯布局（三行三列布局）

布局效果類似聖杯，所以叫聖杯布局。就是三行三列布局 核心 主要就是實現中間主體部分中的左右定寬 中間自適應的布局效果 左右定寬 left,right left center right class left div class right div class center div 改變順序，需要把c...

探索CSS實現三行三列等高布局

2006 02 13 07 47 07 author greengnn font size large medium all 第一步 建立乙個結構 xhtml開始於header,footer,and container css先定義container，給將要加入的sideleft，和siderigh...

DIV CSS三行兩列經典布局

師阿捷2004年發布在 網頁設計師 上的，乙個非常經典的布局，在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...