CSS 属性 columns

CSS 属性 columns 用来设置元素的列宽和列数。

通常在报纸中容易看到将文字内容拆分为多列。

columns 是唯一可以分割内容的 CSS 布局方法。

它是一个简写属性，可在单个方便的声明中设置 column-width 和 column-count 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

要将连续的内容块拆分为多列，可以轻松便捷的实现瀑布流布局。

<div class="cards"><div class="card" v-for="item in list"><img src="item" alt="photo"></div>
</div>

.cards {columns: 4 100px;padding: 1.5rem;
}.card {background: #eaeaea;padding: 1rem;
}.card img {max-width: 100%;
}

当我们尝试调整视口宽度的时候，会自动变成三列，显示数量将根据可用空间量而变化。在没有媒体查询工作的情况下，属性自带响应式的功能！自动生成理想的列宽和列数。

columns 属性可以按任何顺序指定为下面列出的一个或两个值。

column-width：理想的列宽，auto 关键字。

column-count：元素内容应分成的理想列数，或 auto 关键字。

CSS 属性 columns相关推荐

css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
050_学习的CSS属性
1. 尺寸属性(Dimension) height: 设置元素高度. max-height: 设置元素的最大高度. max-width: 设置元素的最大宽度. min-height: 设置元素的最小高 ...
blr不是已知的css属性名,css笔记
背景图片满屏显示: .mainbody{position:absolute; top:0; left:0; height:100%; width:100%; background-image:url( ...
CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
第60天：js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发. 现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-e ...

CSS 属性 columns

CSS 属性 columns相关推荐

最新文章

热门文章