爱站程序员基地多列布局
-
column
1. column-count 最大列数
2. column-width 最小列宽度
3. columns 以上两个样式的合写
4. column-gap 列间距
5. column-rule 分割线样式(列与列之间)
6. column-span 是否允许元素跨列显示
-
eg：
<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>多列布局</title><style type=\"text/css\">.box {/* 多列布局column1. column-count 最大列数2. column-width 最小列宽度3. columns 以上两个样式的合写4. column-gap 列间距5. column-rule 分割线样式(列与列之间)6. column-span 是否允许元素跨列显示*//*column-count: 5;column-width: 300px;*/columns: 5 300px;column-gap: 80px;column-rule: 5px dotted red;}.box h2 {column-span: all;text-align: center;}</style></head><body><div class=\"box\"><h2>心有所信，方能行远！</h2><p>“心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更心有所信，方能行远。面向未来，走好新时代的长征路，我们更</p></div></body></html>
