對要素進行橫向排列的時候，一般都會使用float, display:inline-block等方法。我們使用table-cell也可以簡單的實現，
利用table-cell來制作橫向排列的好處我覺得有三點（呵呵呵，有些牽強）

1.float以及 clear:both都可以省略了；
2.縱向居中也可以了；
3.就算使用border和padding也不會頂出邊框了。
clear:both可以使用display:inline-block替換，display:table-cell最主要的是縱向居中。
還有就是在響應式設計的時候，padding和border不會導致樣式頂出邊框的問題。再也不需要計算寬度和使用box-sizing了。

table-cell制作的橫向排列
首先介紹一下table-cell的基本寫法

例，我們制作一個，一般網站中都會出現的左圖右文的樣式

CSS部分：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表