css多列列表布局

待我称王封你为后i 2023-10-06 15:04 13阅读 0赞

### **ss3-多列** ###

多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。

![7cea47297a6387a30c0a2c47eb6699b5.png][]

### **多列属性** ###

1、column-count

属性规定元素应该被分隔的列数
    适用于：除table外的非替换块级元素, table cells, inline-block元素

2、column-gap

属性规定列之间的间隔大小

3、column-rule

设置或检索对象的列与列之间的边框。复合属性。
    column-rule-color规定列之间规则的颜色。
    column-rule-style规定列之间规则的样式。
    column-rule-width规定列之间规则的宽度。

4、column-fill

设置或检索对象所有列的高度是否统一
    auto：列高度自适应内容
    balance：所有列的高度以其中最高的一列统一

5、column-span

设置或检索对象元素是否横跨所有列。
    none：不跨列
    all：横跨所有列

6、column-width

设置或检索对象每列的宽度

7、columns

设置或检索对象的列数和每列的宽度。复合属性
    <' column-width '> || <' column-count '>

**注：Internet Explorer 10 和 Opera 支持多列属性。** **Firefox 需要前缀 -moz-。** **Chrome 和 Safari 需要前缀 -webkit-。**

### **多列案例（瀑布流）** ###

![42128152ce124d2392dc2cd8deeead97.png][]

[7cea47297a6387a30c0a2c47eb6699b5.png]: https://img-blog.csdnimg.cn/img_convert/7cea47297a6387a30c0a2c47eb6699b5.png
[42128152ce124d2392dc2cd8deeead97.png]: https://img-blog.csdnimg.cn/42128152ce124d2392dc2cd8deeead97.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 布局两列

[css 布局两列 ][css _] ![watermark_type_ZmF...

末蓝、/ 2024年04月20日 08:48/ 0 赞/ 72 阅读

相关 CSS3--多列布局与响应式

多列布局（一）column多列属性一、columns：设置多列布局的列宽和列数。 1. **columns**: < column-width > ...

浅浅的花香味﹌/ 2024年04月19日 15:15/ 0 赞/ 74 阅读

相关 CSS中如何实现多列布局？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 多列布局（Multi-column Layout） ⭐ \`column-count\` ⭐ \`co

r囧r小猫/ 2023年10月15日 10:03/ 0 赞/ 37 阅读

相关 CSS 垂直居中、多列布局

阅读目录垂直居中基本实现思路单列布局示例网站两列布局示例网站

妖狐艹你老母/ 2023年10月07日 20:25/ 0 赞/ 19 阅读

相关 css多列列表布局

ss3-多列多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。 ![7cea47297a6387a30c0a2c47eb6699b5.png][] 多列

待我称王封你为后i/ 2023年10月06日 15:04/ 0 赞/ 14 阅读

相关多列布局

简介支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow），列之间的间距（gap）大小，以及列的分隔线（column rules）属性

梦里梦外;/ 2023年01月03日 04:44/ 0 赞/ 157 阅读

相关 css3-多列布局

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

忘是亡心i/ 2022年07月14日 00:43/ 0 赞/ 191 阅读

相关 css3的多列布局（columns）

多列布局：可以实现web页面像报纸、杂志那样的布局 1. column-count：number；设置列数 2. column-gap：50px | 2em；设置列之间的间

偏执的太偏执、/ 2022年05月09日 05:36/ 0 赞/ 244 阅读

相关 CSS 常见两列布局、三列布局

一、两列布局：　方法一：采用position：absollute;并设置margin-left的值。 left{ position:absol

我会带着你远行/ 2021年12月14日 12:27/ 0 赞/ 368 阅读

相关 css 多列等高等宽布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

Bertha 。/ 2021年11月17日 22:52/ 0 赞/ 402 阅读