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