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

2021-05-05 10:01:48 阅读：214 来源： 互联网

标签：column 个数 number width HTML 五十一宽度分栏

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>

标签：column,个数,number,width,HTML,五十一,宽度,分栏
来源： https://blog.csdn.net/weixin_44730244/article/details/116420468

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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