css多列布局

Posted 2020-06-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css多列布局相关的知识，希望对你有一定的参考价值。

@charset "UTF-8";
/* CSS Document */

div{
    -webkit-columns:auto 5;
    -moz-columns:auto 5;
    -ms-columns:auto 5;
    -o-columns:auto 5;
    columns:auto 5;
}
/*自适应，永远都是三列*/

div{
    -moz-column-width:100px; /* Firefox */
    column-width:100px;
    
    column-count:3;   /*用于设置列数*/
    -moz-column-gap:100px;
    -webkit-column-gap:100px;
    -webkit-column-rule:5px dashed red;
}

h1{
    text-align:center;   /*标题的剧居中*/
    
    -webkit-column-span:all;    /*规定元素应横跨多少列，默认1*/

以上是关于css多列布局的主要内容，如果未能解决你的问题，请参考以下文章

css3多列布局

css之dispaly:flex;多行多列