CSS-多列布局3-瀑布流

1、实现效果

瀑布流

2、实现思路

（1） 使用多列布局进行布局。
（2） 使用column-break-inside 防止元素内部断开。
（3）使用img 宽度设置100%，可以等比例缩放到图片，显示不定宽度的图片。

3、源代码

GIT源代码地址

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

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,788评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,327评论 0赞 11
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1赞 92
  • 使用纯 CSS 实现 500px 照片列表布局
    使用纯 CSS 实现 500px 照片列表布局 文章很长，因为介绍了如何一步一步进化到最后接近完美的效果的，不想读...
    HZ充电大喵阅读 2,655评论 0赞 4
  • 枪本善良
    一抹油腻的亲吻过后 我接受了耶和华赏赐卑奴们的最后一次洗礼 他们的脉搏在不同的旋律上跳动着同一个韵脚 一个指手画脚...
    大耳遮天阅读 90评论 0赞 1