display:table-cell

佈局神器 display:table-cell

第一個案例：

　　在以前下面的佈局方式我會用float來實現，但它觸發的問題比較多。好比清除浮動，元素浮動後會脫離文檔流，但有時候沒辦法的不去使用float佈局。再來講說inline-block，它結合了inline和block二者的特性於一身，簡單的說：設置了inline-block屬性的元素既擁有了block元素能夠設置width和height的特性，又保持了inline元素不換行的特性。

 

A

B

demo

 

第二個案例：

　　這個案例我以前最喜歡用的是BootStrap柵格系統。柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。但同時柵格系統也有不足之處，一旦超出12元素就會往下掉。

 

• 1
• 2
• 3
• 4

demo