多列布局，常用属性：
column-count:设置列的具体个数
column-width:控制列的宽度
column-gap:两列之间的缝隙间隙
column-rule:规定列之间的宽度，样式和颜色
column-span:规定元素应横跨多少列（n指定跨n列，all跨所有列）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.warpper{
width: 100%;
padding: 20px;
box-sizing: border-box;
column-count: 3;
column-rule: dashed 3px red;
column-gap: 50px;
/* 设置列宽，原则：取大优先。
1、如果设置宽度更大，则取更大的值。但是会填充整个屏幕
2、如果设置宽度更小，使用默认计算的宽度*/
column-width: 300px;
}
h4{
/* 设置跨列显示：1， all */
column-span: all;
}
</style>
</head>
<body>
<div class="warpper">
<h4>今日新闻</h4>
新湖南3月11日讯 据湖南气象网消息....
</div>
</body>
</html>
3474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
