|
應原書編輯要求，先在文章頂部給出鏈接：《Everything You Know About CSS Is Wrong》http://www.sitepoint.com/books/csswrong1/
這本書是10月發(fā)行的新書，為了避免版權(quán)糾紛，如要轉(zhuǎn)載本文請保留以上鏈接，并遵循該 CC2.5協(xié)議。
從 digital-web 的首頁上看到一個標題黨《Everything You Know About CSS Is Wrong》，被雷過之后仔細看了下原文，發(fā)現(xiàn)了一種新的CSS布局思路（其實就是詳細介紹了display:table屬性）。在IE6仍是王道的時代談這種技術(shù)為時過早，全當是練習英文翻譯貼出來給大家分享下，歡迎大家指點不足之處。
—————————以下是中文翻譯——————————–
當IE8發(fā)布時，它將支持很多新的CSS display屬性值，包括與表格相關(guān)的屬性值：table、table-row和table-cell，它也是最后一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術(shù)的結(jié)束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網(wǎng)頁元素應用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因為使用了table那樣的制表標簽所導致的語義化問題。
在深入了解這種方法之前，讓我們先來寫份HTML文檔實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" <head>
? HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
? navigation column content…
</div>
<div id="extras">
? news headlines column content…
</div>
<div id="content">
? main article content…
</div>
</div>
</div>
</body>
</html>
這份HTML源代碼滿足了內(nèi)容呈現(xiàn)方面的要求。先是導航欄，然后是附加欄，最后是內(nèi)容欄。
我們同樣需要將以下CSS樣式應用上去：
#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
這種基于表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：
我們輕松實現(xiàn)了三欄等高布局，而無需使用偽造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！
出處：Alipay UED
責任編輯：moby
上一頁 下一頁 基于display:table的CSS布局 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 基于display:table的CSS布局 [1]
第 2 頁 
