第一个案例：
在之前下面的布局方式我会用float来实现，但它触发的问题比较多。比如清除浮动，元素浮动后会脱离文档流，但有时候没办法的不去使用float布局。再来说说inline-block，它结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
A B
demo
第二个案例：
这个案例我之前最喜欢用的是BootStrap栅格系统。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。但同时栅格系统也有不足之处，一旦超出12元素就会往下掉。
1234
demo
转载于:https://www.cnblogs.com/min-ym/p/6116047.html
相关资源：数据结构—成绩单生成器