1.单行布局
1.1 inline-block实现(实现了水平居中和垂直居中)
https://jsbin.com/yaqafukira/edit?html,css,output
1.2flex布局
https://jsbin.com/naceqoguko/edit?html,css,output
2两行布局
2.1 float实现
https://jsbin.com/vojazezata/edit?html,output
main加上margin-left是为了防止背景的平铺
2.2 flex布局来实现
https://jsbin.com/pagopor/edit?html,css,output
3.三行布局
3.1float布局
https://jsbin.com/diqexok/edit?html,css,output
3.2flex布局
https://jsbin.com/tohapo/edit?html,css,output
代码4
4.1float布局
https://jsbin.com/taneduk/edit?output
4.2flex布局
https://jsbin.com/vakifu/edit?html,css,output
代码5
5.1float布局
网友评论