沒有固定寬度的CSS布局

Question

我不是CSS的專家; 我知道它在某種程度上但不是很深; 浮動和IE6讓我哭泣。 所以我總是很高興看到人們可以用它做什么。

但是，我看到的大多數示例都使用固定維度。 據我所知，這是因為CSS非常棘手，而且當元素有寬度時更容易破解，特別是在IE6中。

但是，我真的很喜歡靈活的寬度。 如此，我不明白為什么用表格進行設計是錯誤的？ 有一本書叫做“你所知道的關於CSS的一切都是錯的！” 這解釋了現在我們可以用最近的瀏覽器用CSS做表格布局是多么好......但是，我們不能一直用HTML表格來做這件事嗎？ 是的，它不是CSS，也許不像純CSS一樣干凈......但是，畢竟，表格布局是我們經常需要的，如果我們必須選擇邪惡的hacky CSS來做到這一點而且簡單但不是純粹的 -足夠的HTML表，我不明白為什么這些選擇中的任何一個都應該被認為是壞的。 KISS是件好事，不是嗎？

或者，也許我不理解它，你可以在CSS中制作類似於表格的布局 - 在IE6中工作 - 沒有太多痛苦的屁股？ 這些網站的任何例子？

更新：是的我知道內容和風格分離。 事實上，我對DRY，SRP和其他設計必須做的事情充滿狂熱。 這就是我真正嘗試用CSS做事的原因; 但是，如果它比桌子更難，更不可靠，甚至用上面提到的書寫，為什么要這么努力呢？ 我不是說一切都必須在表格中完成; 但如果它比CSS 更容易 - 為什么我更喜歡CSS到一個簡單且可預測的解決方案呢？

也就是說，我並不是說你應該總是使用表格。 請記住主頁面布局 - 它是獨立的，不影響其他頁面，我可以在20分鍾內從CSS切換到表格（事實上我已經這樣做了）沒有問題 - 為什么我應該堅持使用CSS，即使表格是無害？

更新：我發現這是對我想說的內容的一個非常好的總結： http ： //www.flownet.com/ron/css-rant.html 。 討論http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments 。

對於那些感興趣的人，這里有一篇更好的文章： http ： //kv5r.com/articles/dev/layouttables1.asp

Answer 1

看看Yaml和Fluid 960gs 。 兩者都可以幫助您跨瀏覽器布局。 表格布局不是答案，IE6遲早會消失。

Answer 2

你基本上是對的。 只要對於可訪問性，單元格的順序適合於頁面，使用表格進行布局就沒有什么問題。 我個人覺得固定寬度比使用表格布局更糟糕。

當你使用表格進行布局時，一定要使用樣式width: 100%; table-layout: fixed width: 100%; table-layout: fixed （以及帶有樣式width <col> ），以便瀏覽器可以從一開始就正確地放置表（這可以修復表格布局中的一個可用性問題），這樣你就不會依賴IE了相當糟糕的自動布局寬度猜測。

雖然我當然更喜歡CSS布局，並且只使用CSS可以合理地實現大多數簡單的站點布局（特別是現在IE5及其Quirky Box模型已經消失），但在某些情況下CSS無法破解它並且表格可以。 常見的情況是復雜的流體寬度形式。

最重要的問題是缺乏說width: 100%-10em的能力，以獲得一個視口寬度減去另一列固定大小的列。 對於簡單的情況，您可以使用邊距和包裝div來解決這個問題，但是一旦您開始重新排序頁面上的元素並添加多個包裝器以使CSS布局正常工作，您就已經將演示文稿與內容：與表格並沒有太大的不同。

在最糟糕的情況下，你最終會得到那些愚蠢的“CSS框架”，它們要求你使用嵌套和固定的類名來完全指定標記本身內部的布局。 這並不比桌子好; 我發現這絕對是一個非常有趣的事實，這個過去的無可救葯的倒退被認為是一種時髦的尖端Web 2.0技術。

CSS3正在研究當前定位選項的一些有趣替代方案，這些方案有朝一日可能會實現總標記和布局分離的承諾。 但今天還有很長的路要走。

Answer 3

除了表格數據之外，HTML表格還有其他原因。 HTML是數據內容的標記語言，因此應包含實際數據的分組，而不是該數據的布局。 CSS完全用於布局和樣式目的; 因此它的名字。 因此，CSS應該包含網頁的整個外觀，而HTML包含數據的結構; 從來沒有twain會見。

在表格中做所有事情是有原因的。

你應該把它看作是風格和內容之間的抽象，你可以從這里得到一個很好的概述： http ： //www.alistapart.com/articles/separationdilemma/

也直接回答你的問題轉到'A List Apart'並搜索你的文章。 它們描述了你將要在這里制作的旅程： http ： //www.alistapart.com/articles/journey/

為什么我更喜歡CSS到簡單且可預測的解決方案？

這就是我們想說的。 在短期內看起來似乎更容易，但是你寫的任何內容都將更難以維護，並且將來更難編輯。 你可以去編寫一個在短期內看起來更容易的網頁，但是當你想要做更多事情的時候，你只是在自己的腳下刺傷自己。 為什么不在第一輪就做好呢？ （這只是額外的努力）

Answer 4

僅僅因為CSS布局對您來說是一個挑戰，這並不會使它不如表格。 通過陳述這一點，你犯下了一種被稱為相對主義謬誤的邏輯謬誤。

一旦你完全理解CSS，如何使用它，以及大多數不同的瀏覽器怪癖，你會發現它遠遠優於HTML表。

標記應該是語義的。 也就是說，它應該准確地描述它包含的內容。 這使它成為機器可讀（適用於SEO和其他應用程序）。 布局表根本不是語義。

不同層的抽象有助於使網站更容易維護。 保留HTML中的內容，Javascript中的行為以及CSS中的表示。

但是你說CSS有它的缺點是正確的。 但是表格還有更多，更糟糕的是。

Answer 5

您不希望使用表格作為布局的標記的原因是設計和內容的分離。

您的標記應該獨立存在，作為其中內容的完美描述。 基本上你應該在觸摸樣式之前用html標記你的頁面。 然后，您將使用CSS來修改默認情況下語義標記的外觀。

事實上，您正在布置的網頁內容不是“表格數據” - 標記是供計算機/機器人閱讀，樣式供我們查看，混合兩者只會讓一方或雙方感到困惑，通常增加了可維護性的成本。

Answer 6

這是我個人遇到的情景，我喜歡分享。 注意：我並不是在提倡“無桌面”，而是提出了其他要求。

我創建了一個表單（視覺上自上而下的流程）：

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

然后客戶想要一個更結構化的管狀管子：

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

由於我沒有使用TR TD排序表，我可以輕松（幾乎）使用CSS修改和次要HTML標記更改來轉換結構。