共计 1498 个字符，预计需要花费 4 分钟才能阅读完成。
根本款式
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> 正文完