多列布局,常用属性:
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>