css将div分割成两列

在css代码中有一组属性如下：

-webkit-column-count: 2; // Chrome, Safari, Opera
-moz-column-count: 2; // Firefox
column-count: 2;
-webkit-column-gap: 4%; // Chrome, Safari, Opera
-moz-column-gap: 4%; // Firefox
column-gap: 4%;
-webkit-column-break-inside: avoid; // Chrome, Safari, Opera
page-break-inside: avoid; // Firefox
break-inside: avoid; // IE 10+
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;

如果现在有一个div叫example，他的css代码中有以上代码，其中column-count将div分成几组，这里是2组，column-gap是每组之间的距离，这里是div宽的4%，column-break-inside是在每一组中需不需要强制截断，这里是不需要，colum-rule是中间的间隔线，这里是粉色，宽4px。

这里只是一个参考思路，当然还可以用bootstrap，如果想要更深入了解，可以在w3schools上详细了解这几个属性。