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

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

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

例，我們制作一個(gè)，一般網(wǎng)站中都會出現(xiàn)的左圖右文的樣式

CSS部分：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表