多列布局
-
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 {
/* 多列布局
column
1. 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>
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
