根本款式
column-count
column-count: 3
简略的演示，能够变成3列。他只能用数字调节
并且屏幕最小还是3列！十分不敌对
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ column-count: 3; } </style>column-width
其实就是盒子固定宽度，而后边距自适应
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ column-width: 200px; } </style> columns
他表演一个组合套餐，如果3则最多3个。宽度200随便。最终最小1列，最大3
十分敌对
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; } </style> column-gap
他就是边距用的！相当于margin宽
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; column-gap: 80px; } </style> column-rule
就是边距太大，放一条线就更美了！而且跟border截然不同
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; column-rule: 1px solid #ccc; } </style> column-fill
其实他就是定义高度后往里填充， 如果前2个没填满。第三个空着
然而前提是必须有 高度和3个固定盒子3个数量
而后再column-fill
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; height:600px; column-fill:auto; } </style> column-span
中断插一行用的，比方宽度百分百插一个大题目！像报纸上文章的一个大题目或者海报
<div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <h2>苦海无涯回头是岸！！！！</h2> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; height:600px; column-fill:auto; } h2{ column-span: all; } </style>