056 - 苟日新，日日新，又日新

不二如是 · 发表于 2020-11-3 08:51:23

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-11-16 08:21 编辑

上一集：055 - 终于有人可以把BFC给讲清楚了

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

本节重点是多列布局，可以实现之前用 float 和 position 能实现的一切布局。

并且容易简单很多倍，小甲鱼老师解释了其中玄机：

游客，如果您要查看本帖隐藏内容请回复

容易归容易，我们还是要实操下。

先来基础的 html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident quas tempore esse quasi consequatur iusto fuga
accusamus, explicabo adipisci vitae exercitationem sed est illo obcaecati, porro atque qui repellendus incidunt!
</div>
</body>
</html>

复制代码

看到 div 元素中有一断很长的文本。

现在只需通过 column-count 指定列数即可实现多列，添加 css：

div
{
column-count:3;
}

复制代码

效果：

1 行代码，轻松实现 3 列有木有？！

其他几个都是类似的“快捷”实现，一步到位，是不是很爽？！

column-rule-xxx 系列类似我们的 border 属性，只不过用来修改列之前的样式效果。

例如我们修改上面列之间的样式：

div {
column-count: 3;
/* 增加列样式 */
column-rule: 10px solid red;
}

复制代码

效果：

这里我们通过 column-rule 将 column-rule-color、column-rule-style、column-rule-width 合并到一起写。

columns 是 column-count 和 column-width 的缩写一个道理，不做解释啦。

剩下再来说下 column-fill，它用来指定如何填充列，有两个值：balance 和 auto

auto，列高度自适应内容。

balance，所有列的高度以其中最高的一列统一。

重新编写代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局</title>
<style type="text/css">
.balance {
column-count: 3;
column-fill: balance;
background-color: pink;
height: 200px;
}
.auto {
column-count: 3;
column-fill: auto;
background-color: lightblue;
height: 200px;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="balance">
<h2>下面是 column-fill: balance 的演示</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi labore optio cupiditate, voluptatibus beatae amet
iure culpa voluptatem animi quos quo hic, consequuntur eaque aspernatur reprehenderit autem dolor rem. Provident
iure sed animi pariatur quasi nemo, rerum mollitia numquam debitis, necessitatibus ducimus distinctio incidunt
corrupti excepturi inventore blanditiis, nisi culpa!</p>
</div>
<div class="auto">
<h2>下面是 column-fill: auto 的演示</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, facere natus nisi iure magnam deleniti pariatur
ad officia fugit, ut odit quas dolorem. Expedita, soluta. Voluptatibus optio delectus quo saepe consequuntur
cumque vitae animi provident ex quod natus quis aspernatur consequatur mollitia nulla temporibus est sequi id ea,
quia autem.</p>
</div>
</body>
</html>

复制代码

效果：

大家按需使用即可。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：057 - 三位一体(I)

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

小甲鱼的铁粉 · 发表于 2020-11-3 08:55:49

顶！！！！！！！！！

pym131420 · 发表于 2020-11-10 22:47:50

natapon · 发表于 2021-1-29 12:25:18

回复看看看

natapon · 发表于 2021-1-30 07:18:50

回复快快快

13998929493 · 发表于 2021-4-13 10:21:27

O2H2O · 发表于 2021-7-13 16:55:54

玄机来咯

O2H2O · 发表于 2021-7-13 17:24:01

速查宝典漏了column-fill这个属性哟~

hornwong · 发表于 2021-7-13 21:53:45

心驰神往 · 发表于 2021-8-4 10:43:31

刘彩玲 · 发表于 2021-8-19 20:11:43

想看

douTREE · 发表于 2021-9-13 16:33:04

column

xuexiaoyan · 发表于 2022-8-8 20:17:50

c2514710281 · 发表于 2022-11-5 10:33:49

爱鱼C

BBwing · 发表于 2022-12-12 08:15:40

看看

小坛砸 · 发表于 2024-4-18 10:28:10

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 056 - 苟日新，日日新，又日新

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: