[分享]css3多列布局间隙

CSS3多列布局是网页布局中常用的一种方式，可以将内容分列显示，使页面更具有层次感和美观度。但在多列布局中，经常会遇到间隙的问题。在使用CSS3多列布局时，我们可以设置列数、列宽和间距来控制列布局。其...

CSS3多列布局是网页布局中常用的一种方式，可以将内容分列显示，使页面更具有层次感和美观度。但在多列布局中，经常会遇到间隙的问题。

在使用CSS3多列布局时，我们可以设置列数、列宽和间距来控制列布局。其中，列宽和间距是紧密相连的，当不设置列宽而只设置间距时，就会出现多列布局间隙的情况。

 /*列数，列宽和间距*/
    .column{
        -webkit-columns: 3 200px;
        -moz-columns: 3 200px;
        columns: 3 200px;
        column-gap: 20px;
    } 

上述代码中，设置了3列，每列宽度为200px，列之间的间距为20px。但在实际运用中，如果不设置列宽，只设置间距，则会出现布局间隙的问题。

 /*仅设置列之间间距*/
    .column{
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3;
        column-gap: 20px;
    } 

此时，就会出现间隙的情况。原因是，设置了列数，但没有设置列宽度，这时浏览器会自动根据容器宽度计算每列宽度。而由于计算误差，两列之间就会出现一定的间隔。

为解决这个问题，我们可以设置列宽为百分比，而不是具体数值。

 /*列数和列宽为百分比*/
    .column{
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3;
        column-gap: 20px;
        width: 100%;
    }
    .column p{
        width: 33.3%;
        box-sizing: border-box;
        padding: 0 10px;
    } 

上述代码中，设置了列数和间距，而列宽度为百分比，同时设置了每列p元素的宽度为33.3%，并设置了padding值来辅助计算。这样，就可以避免出现多列布局间隙的问题。