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

Css布局学习之column的分栏布局相关推荐

column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
css 分栏布局 columns
分栏布局 – 简介将子元素拆分为列,使用场景并不多,重点掌握 columns 和 column-gap,其他用得少,简单了解下即可. 优点: 不会改变元素原本的display计算值 <ul s ...
column分栏布局和等高布局和双飞翼布局和圣杯布局
column分栏布局 column-count:分栏的个数 column-width:分栏的宽度 column-gap:分栏的间距 column-rule:分栏的边线 column-span:合并分栏 ...
【LaTeX笔记12】Latex分栏布局及模板使用
经过三天的学习,记录了12个笔记,所有的代码已经上传到GitHub. 1 分栏布局分栏布局是我们阅读文献经常见到的排版布局,下面给一种分栏布局的基本方法. % 导言区 \documentclass[ ...
网页设计中分栏布局的几种实现方案
在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局.这其中又以部分栏固定,部分栏自适应的方式最为常见.下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案. 三栏布局三栏布局最常 ...
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局
pc端常见的几种布局:分栏布局,通栏布局,版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度,让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的 ...
column分栏布局只是文字布局吗_CSS3 column 分栏
column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的宽 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

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

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

Css布局学习之column的分栏布局相关推荐

最新文章

热门文章