纯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 @ 2022-03-09 11:47  奶包迷了鹿  阅读(53)  评论(0)    收藏  举报