个人笔记2020 6-4

CSS3中的多栏布局

1.column-count属性

写法:column-coutnt:栏目数
兼容性写法:-webkit-column-count:3;-moz-column-count:3;
代码及效果图如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3多栏布局</title>
    <style>
        #div1{
            width: 100%;
            -webkit-column-count:3;
            -moz-column-count:3;

        }
    </style>
</head>
<body>
<div id="div1">CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局CSS3多栏布局
</div>

</body>
</html>

在这里插入图片描述

2.column-width属性:指定栏目的宽度来分栏

兼容性写法:-webkit-column-width;-moz-column-width;
将上述代码的-webkit-column-count:3、 -moz-column-count:3分别改成
-webkit-column-150px、-moz-column-150px。效果如下:
在这里插入图片描述

3.column-gap属性:指定栏目与栏目之间的距离

兼容性写法:-webkit-column-gap:像素;-moz-column-gap:像素;
在上述代码中加入webkit-column-gap:50px、-moz-column-gap:50px。效果如下:
在这里插入图片描述

4.栏目与栏目之间添加分割线

兼容性写法:-webkit-column-rule:;-moz-column-rule;
在上述代码中加入-webkit-column-rule:solid 1px #909090;-moz-column-rule:solid 1px #909090。得到效果如下:
在这里插入图片描述

你可能感兴趣的:(个人笔记)