您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

多列属性

这是经常被忽略的,因为很少有人知道,或者说大部分人仅仅只是知道,但并没有使用过。

它的语法形式是酱紫的:columns: 2(列数);

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除认样式 */
    * { padding: ; margin: ; }

    /* 令html和body全屏, 并有灰色背景 */
    html, body { height: ; background: gray; }

    /* 找到直接父元素 */
    body {
      /* 将列数设置为2 */
      columns: ;
      
      /* 设置列间距 */
      column-gap: px;
    }

    div {
      /* 给个高度 */
      height: ;

      /* 白色背景 */
      background: white;
    }

    /* 左边盒子设置左边距 */
    .left { margin-left: px; }

    /* 右边盒子设置右边距 */
    .right { margin-right: px; }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

运行结果:

多列 columns 是 CSS3 的新增。

但它却并不像其他 CSS3 新(如 transform)知名度那么高,甚至很多人都不知道还有这么个玩意,大家有空的话可以去了解一下。


联系我
置顶