css 多列样式

最新推荐文章于 2022-04-28 19:58:32 发布

神奇大叔

最新推荐文章于 2022-04-28 19:58:32 发布

阅读量195

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103133910

版权

多列

	分列
		column-count=n数字 分几列
		
	列间距
		column-gap=npx 列间距
		
	间距样式
		column-rule=solid/dashed  2px red   列分割的样式

代码示例:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			.div01{
				width: 500px;
				height: 300px;
				border: 1px solid red;
				overflow: hidden;
				column-count: 3;
				column-gap:30px;
				column-rule:dashed 2px;
			}
		</style>
		
	</head>
	<body>
		<div class="div01">
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			
		</div>
	</body>
</html>