CSS3的Columns

最新推荐文章于 2023-11-26 14:29:41 发布

Meskjei

最新推荐文章于 2023-11-26 14:29:41 发布

阅读量440

点赞数

分类专栏： CSS 文章标签： CSS3 columns

本文链接：https://blog.csdn.net/hjc256/article/details/88222266

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？

文章目录

columns
`column-width`和`column-count`

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，同时再适当拉伸每列宽度。

在这里插入图片描述

Meskjei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3的Columns

大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？文章目录columns`column-width`和`column-count`columns首先要祭出的就是CSS3中新增的columns。columns是一个复合属性，由column-width和column-count组成。字面意思可以看出，一个是列宽，一个是列数。语法格式就像是这样c...
复制链接

扫一扫