CSS布局

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

https://jsbin.com/votajan/edit?output

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS 布局说——可能是最全的
    前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使...
    Calvin李阅读 507评论 0赞 0
  • 常见 CSS 布局方式
    前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,181评论 0赞 59
  • CSS布局
    课程内容 什么是布局 人们需要： “DIV + CSS 布局”？ 不一定尽量使用有语义的标签 常见布局（PC） 如...
    yytyff阅读 388评论 0赞 0
  • 产品经理的日常事儿
    陆续趁着间断的空档儿，将产品经理的那些事儿分集整理、修剪纪要。产品经理的日常事儿 产品经理的日常事儿，有需求分析、...
    samzhao阅读 526评论 0赞 1
  • 阳光遇见高跟鞋[浣溪沙]
    楼宇纵横点薄纱， 风光伞下玉生华。 罗藕凌波迷眼色，脚丫丫。 耳麦沉沦经验曲， 手机推送各式葩。 生命此时庸碌过，...
    一隅偏安阅读 249评论 2赞 7