大家都看过报纸,报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢?
columns
首先要祭出的就是CSS3中新增的columns
。columns
是一个复合属性,由column-width
和column-count
组成。字面意思可以看出,一个是列宽,一个是列数。
语法格式就像是这样
columns: 200px 3;
举个例子来看一下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test</title>
<style>
.one{
width: 700px;
columns: 200px 3;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class='one'>
一、去年成就
国内生产总值增长6.6%,总量突破90万亿元。
....
</div>
</body>
</html>
那么效果就会是这个样子
column-width
和column-count
虽然说column-width
在columns
这个复合属性中写在第一个,但是这却是个不折不扣的“二等公民”,因为在column-width
和column-count
同时都指定了的情况下。浏览器是先考虑column-count
再考虑column-width
的。
也就是说,浏览器是优先考虑列数,再考虑宽度的。看下面这个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test</title>
<style>
.one{
width: 700px;
columns: 200px 3;
margin-bottom: 20px;
}
.two{
columns: 200px 3;
}
</style>
</head>
<body>
<div class='one'>
一、去年成就
国内生产总值增长6.6%,总量突破90万亿元。
....
</div>
<div class='two'>
一、去年成就
国内生产总值增长6.6%,总量突破90万亿元。
....
</div>
</body>
</html>
在这个例子中,两个容器的区别在于一个有指定宽度,而另一个没有(即宽度为一行宽度)。效果如下
很显然,在宽度只有700px
的容器中放入宽度均等的三列,每一列的宽度是不可能达到我们所指定的200px
的。而下方那个未显式指定宽度的容器,很显然每列的宽度是不止200px
的。这都说明了浏览器是优先考虑列数。
而如果我们把下方columns
属性的列数去掉,效果如下:
仅有在容器宽度足够且仅指定了列宽的时候,浏览器才会根据你所指定的宽度来分配列数(即每列宽度都是你所指定的)。
但是如果容器宽度不够,浏览器依然还是会先考虑列数。例如我把第一个容器的宽度设为800px
,并只设置列宽为300px;
,列数为3。浏览器会先考虑“三列,每列300px宽度,那么所需容器宽度就为900px”,但是因为容器宽度仅为800px
,所以浏览器会把列数定为2,同时再适当拉伸每列宽度。