CSS3 实现瀑布流布局

瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。


具体步骤:

1.设置外部容器多列列数(column-count)和列间距(column-gap)

2.设置内容条目的break-inside属性为avoid,使条目总体不被打断。


<div class="container"> //最外层容器
  <div class="item">//条目
     <div class="item__content">//条目内容
      <img src=''>
     </div>
   </div>
   <div class="item">
     <div class="item__content">
       <img src=''>
     </div> 
   </div>
   <!-- more items --> 
    .........
</div>     


.container {
  column-count: 4; //多列的列数
  column-gap: 0;//列间距
 }

.item{
  break-inside: avoid;//避免在主体框中插入任何中断(页面,列或区域)。
}


 

真诚赞赏,手留余香
赞赏
随机推荐
Node.JS 邮件发送模块 nodemailer
使用 linear-gradient 创建渐变背景色的背景
Premiere 去除视频背景 绿幕抠图
jQuery.position()不可靠
20190104 手绘口罩女
如何通过网页启动应用程序
Koa.js 限流中间件 koa-ratelimit
Electron 应用实战 (架构篇)
php中$GLOBALS["HTTP_RAW_POST_DATA"]报错
gyp WARN EACCES user "nobody" does not have permission to access the dev dir