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

最新推荐文章于 2024-07-09 18:22:47 发布

每天进步一大步

最新推荐文章于 2024-07-09 18:22:47 发布

阅读量1.3k

点赞数

分类专栏： HTML css3 CSS

本文链接：https://blog.csdn.net/weixin_44730244/article/details/116420468

版权

HTML 同时被 3 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

css3

30 篇文章 1 订阅

订阅专栏

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>

每天进步一大步

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS（五十一）column分栏布局

column-count：number; 分栏个数column-width：number px; 分栏宽度column-gap: number px ; 分栏的间距column-rule: numberpx(宽度) color（颜色）边线形状（与border设置边框一样）column-span：all/默认不写；合并分栏（独占一行，在需要独占一行的元素上引用该属性）注意：当我们设置分栏的宽度和个数时，它们之间是有冲突的。要么你就写分栏的个数，要么就写分栏的宽度<!DOCTYPE
复制链接

扫一扫

专栏目录