Css布局学习之column的分栏布局

最新推荐文章于 2024-04-26 14:57:51 发布

短腿小萝卜

最新推荐文章于 2024-04-26 14:57:51 发布

阅读量1.1k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43707498/article/details/108792182

版权

Css布局学习之column的分栏布局

一、 column分栏布局的常用属性：
column-count 设置分栏的个数
column-width 设置分栏的宽度
注：一般个数和宽度有冲突，所以column-width和column-count不要设置一起使用
column-gap 设置分栏的间距
column-rule 设置分栏的边线
column-span 合并分栏（all / none）

在这里插入图片描述

二、column代码实例：
对于一段简单文章的的分栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			.div0 {
				width: 600px;
				height: 400px;
				border: 1px solid #000;
				column-count: 3;
				/* overflow: hidden; */
				column-gap: 10px;
				column-rule: red 1px dashed;
			}

			.div0 p:nth-of-type(2) {
				column-span: all;
			}
		</style>
	</head>
	<body>
		<div class="div0">
			<p>
				毕导
				清华大学 化学工程系博士在读
				39,923 人赞同了该回答
				前几天我收到了一条私信，说我被写进小说里了！

				的牛仔都没他忙……

				说实话，我很久没见过数学名词浓度这么高的文字了！对这些概念信手拈来，作者的数学功底简直深不可测啊！
				像雅克比猜想，是多变量多项式的著名问题，到现在还没人证明。小说里程诺这一举就震惊了整个数学界，不过更令人震惊的是

				我已经有点看不下去了。显然他导师也看不下去了。再回到麻省理工，他导师说：

				这可能是我见过的最动听的导师寄语了
				就这样，读了一年的程诺，博士毕业了。接着他拿了维布伦奖、克雷数学科学奖、拉马努金奖...证明了谷山志村猜想、BSD猜想也是手到擒来，发明个程氏复环定理跟出门吃麻辣烫似的……
				这些猜想在现实生活中都是有的！有些甚至是人类未解难题。但程诺解它们跟砍瓜切菜似的，也不知道为啥数学界没有一个人质疑过程诺是咋这么天才的。
			</p>
			<p>
				
				就这样，读了一年的程诺，博士毕业了。接着他拿了维布伦奖、克雷数学科学奖、拉马努金奖...证明了谷山志村猜想、BSD猜想也是手到擒来，发明个程氏复环定理跟出门吃麻辣烫似的……
				，也不知道为啥数学界没有一个人质疑过程诺是咋这么天才的。
			</p>
		</div>
	</body>
</html>

在这里插入图片描述

文章或者段落需要进行分块的时候或者用column-count做简单的瀑布流布局（不用浮动就可以使图片更快分块排列）

短腿小萝卜

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Css布局学习之column的分栏布局

Css布局学习之column的分栏布局一、 column分栏布局的常用属性：column-count 设置分栏的个数column-width 设置分栏的宽度注：一般个数和宽度有冲突，所以column-width和column-count不要设置一起使用column-gap 设置分栏的间距column-rule 设置分栏的边线column-span 合并分栏（all / none）二、column代码实例：对于一段简单文章的的分栏<!DOCT
复制链接

扫一扫