HTML5教程

HTML-CSS（五十一）column分栏布局

本文主要是介绍HTML-CSS（五十一）column分栏布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

column-count：number; 分栏个数

column-width：number px; 分栏宽度

column-gap: number px ; 分栏的间距

column-rule: numberpx(宽度) color（颜色） 边线形状（与border设置边框一样）

column-span：all/默认不写；合并分栏（独占一行，在需要独占一行的元素上引用该属性）
注意：当我们设置分栏的宽度和个数时，它们之间是有冲突的。要么你就写分栏的个数，要么就写分栏的宽度
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				height: 200px;
				border: 1px solid black;
				/* column-count: 3; */
				margin: 0 auto;
				column-width: 50px;
				column-gap: 20px;
				column-rule: 2px dashed #00FFFF;
				
			}
			h2{
				column-span: all;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="">
			<h2>新闻</h2>
			1印度航空计划增加直飞美国航班431省区市新增13例确诊均为
			境外输入2梅西将接种中国新冠疫苗参加美洲杯热5印度部长视
			察医院劝民众向神祈祷3中亚两国激烈交火 居民蹲墙后围观
		</div>
	</body>
</html>
这篇关于HTML-CSS（五十一）column分栏布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航