纯css怎么实现瀑布流

发布时间:2022-03-05 09:56:43 作者:小新
来源:亿速云 阅读:153

这篇文章主要介绍了纯css怎么实现瀑布流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

  1.multi-column多列布局实现瀑布流

  先简单的讲下multi-column相关的部分属性

  column-count设置列数

  column-gap设置列与列之间的间距

  column-width设置每列的宽度

  还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断

  break-inside属性值

  auto指定既不强制也不禁止元素内的页/列中断。

  avoid指定避免元素内的分页符。

  avoid-page指定避免元素内的分页符。

  avoid-column指定避免元素内的列中断。

  avoid-region指定避免元素内的区域中断。

  截取了部分,可自己填充

  /*html文件*/

  <!--使用multi-columns实现瀑布流-->

  <divid="root">

  <divclass="item">

  <imgclass="itemImg"src="../images/1.jpeg"alt=""/>

  <divclass="userInfo">

  <imgclass="avatar"src="../images/gift.png"alt=""/>

  <spanclass="username">牵起你的左手护着你</span>

  </div>

  </div>

  <divclass="item">

  <imgclass="itemImg"src="../images/2.jpg"alt=""/>

  <divclass="userInfo">

  <imgclass="avatar"src="../images/gift.png"alt=""/>

  <spanclass="username">牵起你的左手护着你</span>

  </div>

  </div>

  <divclass="item">

  <imgclass="itemImg"src="../images/3.jpg"alt=""/>

  <divclass="userInfo">

  <imgclass="avatar"src="../images/gift.png"alt=""/>

  <spanclass="username">牵起你的左手护着你</span>

  </div>

  </div>

  <divclass="item">

  <imgclass="itemImg"src="../images/4.jpg"alt=""/>

  <divclass="userInfo">

  <imgclass="avatar"src="../images/gift.png"alt=""/>

  <spanclass="username">牵起你的左手护着你</span>

  </div>

  </div>

  <divclass="item">

  <imgclass="itemImg"src="../images/5.jpeg"alt=""/>

  <divclass="userInfo">

  <imgclass="avatar"src="../images/gift.png"alt=""/>

  <spanclass="username">牵起你的左手护着你</span>

  </div>

  </div>

  </div>

  /*css样式*/

  body{

  background:#e5e5e5;

  }

  /*瀑布流最外层*/

  #root{

  margin:0auto;

  width:1200px;

  column-count:5;

  column-width:240px;

  column-gap:20px;

  }

  /*每一列图片包含层*/

  .item{

  margin-bottom:10px;

  /*防止多列布局,分页媒体和多区域上下文中的意外中断*/

  break-inside:avoid;

  background:#fff;

  }

  .item:hover{

  box-shadow:2px2px2pxrgba(0,0,0,.5);

  }

  /*图片*/

  .itemImg{

  width:100%;

  vertical-align:middle;

  }

  /*图片下的信息包含层*/

  .userInfo{

  padding:5px10px;

  }

  .avatar{

  vertical-align:middle;

  width:30px;

  height:30px;

  border-radius:50%;

  }

  .username{

  margin-left:5px;

  text-shadow:2px2px2pxrgba(0,0,0,.3);

  }

感谢你能够认真阅读完这篇文章,希望小编分享的“纯css怎么实现瀑布流”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. CSS方式实现瀑布流
  2. web前端入门到实战:纯CSS瀑布流与JS瀑布流

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:jQuery表单验证的代码怎么写

下一篇:怎么用Css3实现响应式滑动菜单

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》