码迷,mamicode.com
首页 > Web开发 > 详细

【html】学习记录-CSS的column相关属性

时间:2015-07-30 23:03:21      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

column相关属性:

  • column-count:定义内容以多列形式显示
  • column-gap:定义每列之间的间距

示例:

技术分享
<section class="fourcolumn">
    人类或其他任何活着的个体,在生命之初不是放弃,不是自我唾弃,也不是对自己的存在进行诅咒。那些都是需要一个腐败和堕落的过程的,这一腐败的速度因人而异。有些人刚碰到压力便放弃了;有些人出卖和背叛了自己的意识;有些人不知不觉地慢慢熄火了,却从不知道自己何时已经失去了这种意识。然后,长者们蜂拥而上,百折不挠地教导他们说,成熟就是摈弃个人见解:放弃了价值观,他们便获得了安全感;失去了自尊,他们便具有了实践的可能性。此时,所有这一切意识都消失殆尽了。然而,少数人坚持了下来,继续前进,深知这种热情是不可背叛的;同时,他们学会了如何使这种热情具有一定目的,他们修整它,使之成形,并最后实现它。但是,无论前途如何,在人生之初,他们便开始寻求生命的无限潜能和人类的高贵身影。
并没有多少路标可寻。《源泉》是其中之一。
《源泉》之所以具有如此恒远的魅力,其中一个根本的原因就在于——它是对青年志气的认可,同时它歌颂了人类的光荣,显示了人类的可能性有多大。
每一代人中,只有少数人能完全理解和完全实现人类的才能,而其余的人背叛了它。不过这并不重要。正是这极少数的人将人类推向前进,而且使生命具有了意义。
我所一贯追求的,正是向这些为数不多的人致意。其余的人与我无关;他们要背叛的不是我,也不是《源泉》。他们要背叛的是自己的灵魂。
  <br/>——Ayn.Rand 《源泉-序》
</section>

<style type="text/css">
.fourcolumn{
  border: 1px solid orange;
  /* 定义4个列 */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  /* 定义列之间距离 */
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px
  column-gap: 15px;

  width: 1000px;
  padding: 10px;
}
</style>
View Code

效果如下:

技术分享

在上述代码中关于column有三行代码,与适用浏览器相关:

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
  • Internet Explorer 10 和 Opera 支持 column-count 属性。
  • Firefox 支持替代的 -moz-column-count 属性。
  • Safari 和 Chrome 支持替代的 -webkit-column-count 属性。
  • 注释:Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

【html】学习记录-CSS的column相关属性

标签:

原文地址:http://www.cnblogs.com/suzyc/p/4690746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!