CSS3属性之多栏布局column

文将针对CSS 3中的多栏布局做详细介绍，使用多栏布局时只能为所有栏指定一个统一的高度，栏与栏之间的宽度不可能是不一样的，另外也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。

1.首先我们先定义个div盒子

<style>
.box {width: 600px;background-color: #ddd;
}
</style>
<div class="box">我爱北京天安门，天安门上太阳升，伟大领袖毛主席，指引我们向前进！。。</div>

样例图片：

2.使用多栏布局第一个属性：column-count

column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示。

样例代码：

<style>
.box {width: 600px;backgrond-color: #ddd;column-count: 2;
}
</style>

样例图片：

3.使用多栏布局的第二个属性：column-gap

使用column-gap属性来设定多栏之间的间隔距离。

样例代码：

<style>
.box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;
}
</style>

样例图片：

4.使用多栏布局第3个属性：column-rule

column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、样式、颜色，该属性的指定方法与css中的border属性指定方法相同。

样例代码：

<style>
.box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;column-rule: 5px dashed #000;
}
</style>

样例图片：

5.使用多栏布局最后一个属性：column-width

column-width可以设置每一栏的宽度，但是在实际测试中发现并不像描述的那么简单，遂列举出以下几个问题

在设定column-width的同时必须设置盒子的width，否则盒子宽度默认为100%，每栏宽度按照栏数平均分。
盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度，例如盒子宽度400px，一共2栏，那么每栏宽度就是200px，如果设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210px;，但是如果每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width，这么看column-width的个性有点像min-width。

CSS3属性之多栏布局column相关推荐

CSS3新特性-多栏布局
为了实现类似报纸,杂志的多列排版的布局,CSS3新增了一个多列布局模块(css multi column layout module).主要应用在文本的多列布局方面. 语法: colums:<c ...
用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
css3 分栏滑页翻页,基于CSS3 column多栏布局实现水平滑页翻页交互
一.CSS3 column多栏布局私有前缀: -webkit-.-moz- 常用的属性: column-width:每栏的高度 column-count:最理想的分栏个数 column-gap:栏目 ...
column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
CSS3属性的兼容什么是弹性和布局
CSS3新特性,兼容性,兼容方法总结 css3手册css3手册边框 border-radius 用于添加圆角效果语法: border-radius:[ <length> | <p ...
Css布局学习之column的分栏布局
Css布局学习之column的分栏布局一. column分栏布局的常用属性: column-count 设置分栏的个数 column-width 设置分栏的宽度注:一般个数和宽度有冲突,所以col ...
column分栏布局和等高布局和双飞翼布局和圣杯布局
column分栏布局 column-count:分栏的个数 column-width:分栏的宽度 column-gap:分栏的间距 column-rule:分栏的边线 column-span:合并分栏 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...

CSS3属性之多栏布局column

1.首先我们先定义个div盒子

2.使用多栏布局第一个属性：column-count

3.使用多栏布局的第二个属性：column-gap

4.使用多栏布局第3个属性：column-rule

CSS3属性之多栏布局column相关推荐

最新文章

热门文章