Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

columns CSS提供的多列显示

  对内容的多列显示在曾经可是非常棘手的问题,以前要实现这么一个效果还得通过程序去计算并控制元素位置才能勉强做到。现在CSS3中提供了columns属性,使用它可以轻易地让元素内的东西自动变成多列显示的。这可能会在一些新式布局中很有用。
  下面是它最简单的使用范例 <style>
#wall {
  -webkit-columns:3;
  -moz-columns:3;
  columns:3;
}
#wall div {border:1px solid red;}
</style>
<div id="wall">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
</div>

  这简直碉堡,连DIV这样的块级元素都老老实实地多列显示了,仿佛整个盒子生成的含纳块宽度被缩小,并渲染到多个列位置上一样,一种flex的即视感袭来。
  我们经常对列表页的内容单元固定尺寸,然后使用float之类的属性使其入网格般在容器中展示。使用float的原因就是为了在同一“行”中显示多个内容。然而,使用columns属性就可以轻易地解决这个问题。但目前columns属性的支持还需要浏览器前缀,而IE直到IE10才支持上,所以距正式投入使用还稍微有点年月。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^