表v。div/css佈局 - 快速，簡單，可靠？說服我

我知道這個話題已經接近完成死亡，答案是非常明確的「div/css」（你這個傻瓜！），我發誓我想要很好，並且嚴格使用div，但是認真的表格給我很快可靠的針對少數案例的佈局解決方案。表v。div/css佈局 - 快速，簡單，可靠？說服我

這讓我很難過，這些東西都是那麼硬使用css，但是那麼容易用表嗎？我該怎麼辦？我有什麼選擇？

的情況下1：必須空間均勻跨越一定的寬度（如100％）

我的客戶想要一個水平的菜單，是均勻100％和空格跨寬度，在那裏他們可以添加或刪除物品本身（即我並不總是會在那裏得到適合他們的間距） - 這是一個常見設計，真的我在這裏的替代選擇？

100% 
<--------------------------------------------------------------------------> 
div/css: 
------------------------------------------------------------ 
| menu item | super long menu item | menu item | menu item | 
------------------------------------------------------------ 
table: 
---------------------------------------------------------------------------- 
| menu item | super long menu item | menu item | menu item | 
----------------------------------------------------------------------------

NB這是不其中float: left<li>將作爲間距將是完全錯誤的情況。這個問題是關於動態地確定元素的寬度（而不會發瘋或不得不使用js或兩者）。

殼體2：可靠液體柱（用100％高度）

DIV/CSS：50行 - 剪切/從互聯網的液體2柱generater膏（pagecolumn.com）
http://dpaste.com/hold/579540/

表：40行
http://dpaste.com/hold/579538/

也許這只是我，但桌面版本看起來更加健全 - 就像它沒有那麼奇怪的動作一樣。

我知道表版本沒有的情況下的99％增加至博克（但絕不會永遠，甚至沒有最瘋狂的瀏覽器做如下彈出招如果瀏覽器決定改變它的解釋邊距/填充）。

我知道，即使瀏覽器窗口是< 250px寬，兩列也會顯示。

爲什麼我會在這種情況下選擇css解決方案？

有一對夫婦更（如垂直對齊這僅僅是一個便宜的鏡頭），但它歸結爲是什麼，我期待的答案是這樣的：

在我的腦海裏，當我坐下來做一個新的網站，並考慮這些事情的div/css的論點不夠強大，不夠可靠。我想要去那樣，但我的直覺說，在長期來說，有龍。

表格爲可靠爲佈局。我覺得自己正在換取劣質產品。浮動，z-索引和位置，而真正有趣和有趣的感覺不像真正的生產網站上的工作馬與nuffy IE使用客戶在現實世界中。

告訴我溝渠表將如何使我的生產/設計過程的其他部分變得更加堅固和簡單。

給我一些實際非深奧的好處。

我正在認真地嘗試改變我的思維方式，然而我肩上的表魔鬼似乎每次都贏得這場討論。幫助我stackoverflow。

來源

2011-07-27 Bob

「表格佈局可靠，我覺得我在換取劣質產品。」這就像一個16歲的說法：「我不是爲我的自行車買車，你瘋了嗎？！」因爲他還沒有學會開車。 –

可能的重複[爲什麼不使用表格在HTML中佈局？]（http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html） – heisenberg

kekekela閱讀這個問題的啓發我寫這個。你看到我的困境？我讀到了，基本沒有答案。似乎沒有人給出我感興趣的答案，這就是爲什麼我關注於詳細的例子而不是問題關注的概念性問題。 – Bob

如果您需要像素完美支持IE6/7，那麼很好：對於上面列出的情況，使用表格更容易。

但是，在IE8 +和所有現代瀏覽器中，you have display: table，它們大多解決了實際使用表時不存在all the downsides問題。

例如：How to make children auto fit parent's width only with CSS?

由於IE6/7並不是那麼重要（和他們的市場份額爲rapidly dropping），我會用display: table-cell，並使用JavaScript/jQuery的後備只有IE6 /解決上面的問題7。

來源

2011-07-27 12:11:26 thirtydot

謝謝@thirtydot – Bob

表格是一個預先定義的固定網格，您必須適合您的內容，一旦出現，無法輕鬆移動或更改（如果有的話），而無需重新整理整個佈局。

許多表格都使用瀏覽器內置的CSS樣式表進行樣式化，所以說表格勝過CSS是不正確的。

來源

2011-07-27 12:56:23 Rob

表v。div/css佈局 - 快速，簡單，可靠？說服我

回答

相關問題