CSS

多列布局——Columns和column-width

字号+ 编辑: Snake 修订: 呆头鹅甲 来源: 慕课网 2021-04-22 16:12 我要说两句(0)

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,CSS3的多列布局可以轻松实现。

1、多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,CSS3的多列布局可以轻松实现。

语法:

columns:<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数:列宽和列数。

参数:

<column-width>主要用来定义多列中每列的宽度

<column-count>主要用来定义多列中的列数

举例:要显示2栏显示,每栏宽度为200px,代码为:

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持:

index.html代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>columns</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="columns">

<h2>我要分列显示</h2>

<p>

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout)。它住哟应用在文本的多列布局方面,对于文本的多列布局,我想大家并不陌生因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。

</p>

<p>

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout)。它住哟应用在文本的多列布局方面,对于文本的多列布局,我想大家并不陌生因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。

</p>

</div>

</body>

</html>

style.css代码:

.columns{
width:500px;
padding:5px;
border:1px solid red;
margin:20px auto;
-webkit-columns:150px 3;
-moz-columns:150px 3;
-o-columns:50px 3;
-ms-columns:150px 3;
columns:150px 3;
}

2、多列布局——column-width

column-width的使用和CSS中的width属性一样,不过不同的是,column-width属性在定义元素列宽的时候,既可以单独使用,也可以和多列属性中其他属性配合使用。

基本语法如下所示:

column-width: auto | <length>

取值说明:

属性值说明
auto如果column-width设置为auto或者没有显示的设置值时,元素多列的列宽将由其他属性来决定,比如前面的示例就是由列数column-count来决定。
<length>使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能是正值,不能为负值。


阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 引入字体文件时报错: OTS parsing error: invalid version tag

  • CSS的边框逐渐发亮效果怎么做的

  • CSS的几个核心概念

  • CSS函数的8个妙用

我要说说
网上宾友点评
沙发已空
多列布局——Columns和column-width