您的位置:首页> 前端教程> CSS3教程
文章导航

CSS column-width

2019-5-28 13:58| 作者: admin| 查看: 1449| 评论: 0|来自: 蚂蚁部落

column-width属性可以设置列的宽度。

关于多列布局的总体介绍参阅CSS columns 多列布局一章节。

语法结构:

[CSS] 纯文本查看 复制代码
column-width: auto|length;

属性值解析:

(1).auto:默认值,它的值由其他相关属性决定。

(2).length:规定列的宽度,比如100px。

关于浏览器支持度本文不作介绍,具体可以http://www.caniuse.com/网站查询。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  width: 400px;
  font-size:14px;
  margin: 20px auto;
  -webkit-column-width:auto;
  -moz-column-width: auto;
  column-width: auto;
}
</style>
</head>
<body>
<div class="columns">
蚂蚁部落前端致力于分享前端基础与进阶知识,运营已经有四年有余。
名字"蚂蚁部落"源于小团队崇尚奋斗与努力,也认识到,一个人再强,力量也是微薄的,就像一只小蚂蚁,但是如果团结起来,则会产生巨大的力量,再强调一点,我们不崇尚996,但是我们崇尚个人自由选择的努力与奋斗。教程内容大多数是蚂蚁部落团队根据自己的开发经验与应用体会精心撰写,希望能够打造一款适合于前端初学者或者需要从初学进阶的朋友的精品教程。当然内容难免会存在一些瑕疵或者不当之处,很多蚂蚁部前端的网友给予了热心的指正,本站也会在第一时间进行了修正。
今天蚂蚁部落前端公众号正式开启,以后会持续分享与前端相关的知识点或者程序员生活相关的话题,与大家进行进一步的交流,感谢大家的支持。
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/140006xm88kpowaptrl8fl.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).column-width属性值设置为auto。

(2).又由于没有设置其他属性,所以呈现单列显示。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  width: 400px;
  font-size:14px;
  margin: 20px auto;
  -webkit-column-width:auto;
  -moz-column-width: auto;
  column-width: auto;
  
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
}
</style>
</head>
<body>
<div class="columns">
蚂蚁部落前端致力于分享前端基础与进阶知识,运营已经有四年有余。
名字"蚂蚁部落"源于小团队崇尚奋斗与努力,也认识到,一个人再强,力量也是微薄的,就像一只小蚂蚁,但是如果团结起来,则会产生巨大的力量,再强调一点,我们不崇尚996,但是我们崇尚个人自由选择的努力与奋斗。教程内容大多数是蚂蚁部落团队根据自己的开发经验与应用体会精心撰写,希望能够打造一款适合于前端初学者或者需要从初学进阶的朋友的精品教程。当然内容难免会存在一些瑕疵或者不当之处,很多蚂蚁部前端的网友给予了热心的指正,本站也会在第一时间进行了修正。
今天蚂蚁部落前端公众号正式开启,以后会持续分享与前端相关的知识点或者程序员生活相关的话题,与大家进行进一步的交流,感谢大家的支持。
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/140253kbmo21abvmw614c0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).设置column-width宽度值为auto,column-count属性值为3。

(3).于是呈现三列显示,每一列的宽度根据其条件进行自动调整。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  width: 400px;
  font-size:14px;
  margin: 20px auto;
  -webkit-column-width:150px;
  -moz-column-width: 150px;
  column-width: 150px;
  
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
}
</style>
</head>
<body>
<div class="columns">
蚂蚁部落前端致力于分享前端基础与进阶知识,运营已经有四年有余。
名字"蚂蚁部落"源于小团队崇尚奋斗与努力,也认识到,一个人再强,力量也是微薄的,就像一只小蚂蚁,但是如果团结起来,则会产生巨大的力量,再强调一点,我们不崇尚996,但是我们崇尚个人自由选择的努力与奋斗。教程内容大多数是蚂蚁部落团队根据自己的开发经验与应用体会精心撰写,希望能够打造一款适合于前端初学者或者需要从初学进阶的朋友的精品教程。当然内容难免会存在一些瑕疵或者不当之处,很多蚂蚁部前端的网友给予了热心的指正,本站也会在第一时间进行了修正。
今天蚂蚁部落前端公众号正式开启,以后会持续分享与前端相关的知识点或者程序员生活相关的话题,与大家进行进一步的交流,感谢大家的支持。
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/140322h2a0rkeuuerzr3pu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).规定列宽为150px,列数为3.

(2).但是实际表现与数据规定并不相同。

最后总结如下,column-width和column-count的表现并不总是精确的,他会收到容器总体宽度与column-gap等属性的影响,column-width规定的实质是列的最小宽度,column-count规定的是列的最大数目。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS column-count下一篇:CSS columns

最新评论

返回顶部