【Javascript】 用css將div化成表格化處理(轉載)

1. Float
應該是以前最多人使用的方法，用法很簡單，就是設left或right

缺點：
浮動的問題相當多，特別是內部容器的浮動，像是：圖片對齊、高度塌陷等等。
需要去清除浮動


2. Display:inline-block
近來許多人推薦的方法，可用來替代Float，它可以模擬浮動的特徵，而不需要處理一些浮動帶來的問題。

這方法原理很簡單，就是把區塊變成行內元素（inline elements），使其能夠水平排列。

使用inline-block元素的好處是，問題比float少很多，而且要水平居中、垂直居中對齊，也比起float輕鬆許多

水平居中：父元素設text-align:center
垂直居中：設置vertical-align:middle

缺點：
ie6、7僅部分支持
會有空白：因inline-block包含html節點，所以如果你html元素間有空白、換行，那麼顯示出來的區塊間就會有空白。
示意圖：可以看到區塊與區塊間有空白


空白解決方案：以下整理出四種解決方式

刪除html元素中的空白，簡單的解決方式，但在多層、code較複雜時不建議使用
使用負Margin
父元素font-size:0px，在指定子元素之font-size
float:left，但後方元素需清除浮動，否則會受影響

是否能完全取代float?
答案當然是否定的，在某些情況下仍然會需要使用float，比如說，元素圍繞某元素（文繞圖）或需支持舊版本ie時。

如果想深入了解inline-block與float差異，可參考：
http://vanseodesign.com/css/inline-blocks/
http://www.vanseodesign.com/blog/demo/inline-block/

3. Display:table
與inline-block效果相似，其實就是用CSS仿HTML的table元素

當然它和過去許多網頁設計師排斥的HTML Table佈局，是不太一樣的，它能做到HTML做不到的許多事情，它最大的優點是，我們只要選擇我們要的屬性就好了

使用方法：父元素設display:table，子元素設display:table-cell

而在做RWD佈局時，使用display:table也相當方便，只要在media query中，將display設成block，如此一來就會自動變成垂直堆疊

缺點：

老版本ie不支持
新瀏覽器顯示上有區別
使用table-cell的區塊，無法使用margin和padding
（解法，請參考這篇：http://muki.tw/tech/fix-display-table-cell-not-affected-by-margin/）


轉自：網頁佈局常用，多個DIV水平排列之三種方法，Float、Inline-block、Table