display:table-cell

Posted 2020-08-21

布局神器 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