html中如何多列布局,CSS3 多列布局

CSS3 多列布局

使用CSS3，您可以将元素的文本内容分成多列。

创建多列布局

CSS3引入了多列布局模块，用于以简单有效的方式创建多个列布局。现在，您无需使用浮动框即可创建像在杂志和报纸上看到的布局。这是一个使用CSS3多列布局功能将一些文本分为三列的简单示例。

示例p {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

}测试看看‹/›

设置列数或宽度

CSS属性，column-count和column-width指定是否以及将显示多少列。column-count属性设置multicol元素内的列数，而column-width属性设置所需的列宽。

示例p {

-webkit-column-width: 150px; /* Chrome, Safari, Opera */

-moz-column-width: 150px; /* Firefox */

column-width: 150px;

}测试看看‹/›

注：column-width指定了列的最佳宽度。但是，实际列宽可能会根据可用空间而变宽或变窄。此属性不应与column-count属性一起使用。。

设置列间隙

您可以使用该column-gap属性指定列之间的间隔。每列之间应用相同的间隙。默认间隔是normal，它等于1em。

示例p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

column-count: 3;

column-gap: 100px;

}测试看看‹/›

设置列规则

您也可以使用column-rule属性在各列之间添加一条线，即规则。它是用于在单个声明中设置规则的宽度，样式和颜色的简写属性。该column-rule属性采用与border和outline相同的值。

示例p {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

-webkit-column-rule: 2px solid red;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 100px;

-moz-column-rule: 2px solid red;

column-count: 3;

column-gap: 100px;

column-rule: 2px solid red;

}测试看看‹/›

注意：列规则的宽度不会影响列框的宽度，但是如果列规则的宽度大于间隙，则相邻的列框将与该规则重叠。

CSS3多列属性

下表简要概述了所有多列属性：

html中如何多列布局,CSS3 多列布局相关推荐

html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column ...
CSS3 多列布局的跨列
默认情况下,多列容器中的内容,会一列一列地自动填充.但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列. 要实现类似报纸.杂志上的跨列效果,就可以使用 column-span属 ...
css3多列布局(columnz)，多列布局相关属性
Css3多列布局(columns) 为什么会出现多列布局? 当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大, ...
css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
CSS3 多列布局的column-gap 和 column-rule属性
多列布局之后,通过 column-gap属性和 column-rule属性来设置相邻两列之间的间隙及边框的样式,column-rule 会出现在列间隙的中间位置,column-gap 和 column ...
html中的box布局,CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
背景 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块( W3C 候选推荐,截止到2017年10月)旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小未知或动态变化情况下仍然能 ...
CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性示例含义 column-count column-count: 3; 将元素内部分割成3 ...
详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动旋转缩放(详细讲解看完就会 ...

html中如何多列布局,CSS3 多列布局

html中如何多列布局,CSS3 多列布局相关推荐

最新文章

热门文章