在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上详细了解这几个属性。