新增的column属性用来进行多列布局。注意新增属性需要些兼容前缀，如-moz-和-webkit- ，最大兼容到IE10

  1. column-count

    column-count 把当前div中的文本/元素划分为三列

    1
    2
    3
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;

  2. column-gap

    column-gap 规定列间的间隔像素

    1
    column-gap:40px;

  3. column-rule

    column-rule 规定列之间的宽度、样式和颜色

    1
    column-rule:3px solid #ff00ff;

  4. column-span

    column-span 允许一个元素的宽度跨越多列

    1
    column-span: all;     /*取值all 或 none*/

  5. column-width

    column-width 每列的宽度

    1
    column-width:100px;

除了上述的几个常用的属性之外，还有

  • column-fill属性，此属性用于标识分列的高度是否统一。不过兼容性特别差，只支持Firefox。
  • break-before、break-after、break-inside属性，这三个属性是用于标识分列之间的行为的（是否中断列,默认允许）

瀑布流布局

error-img

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
    }

    .waterfall-container {
      /*分几列*/
      column-count: 2;
      width: 100%;
      /* 列间距 */
      column-gap: 10px;
    }

    .waterfall-item {
      /* 避免列出现中断 */
      break-inside: avoid;
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
      background: #ddd;
      column-gap: 0;
      text-align: center;
      color: #fff;
      font-size: 40px;
    }
  </style>
</head>

<body>
  <div class="waterfall-container">
    <div class="waterfall-item" style="height: 100px">1</div>
    <div class="waterfall-item" style="height: 300px">2</div>
    <div class="waterfall-item" style="height: 400px">3</div>
    <div class="waterfall-item" style="height: 100px;">4</div>
    <div class="waterfall-item" style="height: 300px">5</div>
    <div class="waterfall-item" style="height: 600px">6</div>
    <div class="waterfall-item" style="height: 400px">7</div>
    <div class="waterfall-item" style="height: 300px">8</div>
    <div class="waterfall-item" style="height: 700px">9</div>
    <div class="waterfall-item" style="height: 100px">10</div>
  </div>
</body>

</html>