纯css3 瀑布流布局

复制代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    .box {
      height: 123px;
      padding: 1em;
      margin-top: 1em;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      border: 1px solid #000;
      background: #909090;
    }

    .spe {
      height: 225px;
    }

    .box-wrapper {
      column-count: 2;
     /* column-gap: 0; */
    }
  </style>
</head>

<body>


  <div class="box-wrapper">
    <div style="margin-top:0px" class="box">1</div>
    <div class="box spe">2</div>
    <div class="box spe">3</div>
    <div class="box spe">4</div>
    <div class="box spe">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box spe">8</div>
    <div class="box spe">9</div>
  </div>
</body>

</html>
复制代码

 

1
2
3
4
5
6
7
8
9
posted @   奶包迷了鹿  阅读(49)  评论(0)  编辑  收藏  举报
相关博文：
· 实现一个简单的幻灯片效果页面
· 使多个不确定高度的div等高对齐排列
· css瀑布流
· css 实现瀑布流布局
· JS实现瀑布流页面布局
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示