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做简单的瀑布流布局(不用浮动就可以使图片更快分块排列)