column-span:all效果示意实例页面

展示

代码

• HTML：

  <h4>默认</h4>
  <div class="container">
      <p>第1段</p>
      <p>第2段</p>
      <p>第3段</p>
      <p>第4段</p>
      <p>第5段</p>
  </div>
  <h4>第4段设置了column-span:all</h4>
  <div class="container">
      <p>第1段</p>
      <p>第2段</p>
      <p>第3段</p>
      <p class="span-all">第4段</p>
      <p>第5段</p>
  </div>

• CSS：

  .container {
      width: 320px;
      border: solid deepskyblue;
      padding: 10px;
      column-count: 3;
  }
  .container p {
      background: deepskyblue;
  }
  .span-all {
      column-span: all;
      color: white;
  }