您的位置：首页 > 前端技术 > css3多列布局模块研究

css3多列布局模块研究

4 comments 2010-5-31 17:30:20 views

CSS3多列布局模块是css3提出的新的东西，可以将文章分成多列显示。

下图是应用了column样式后在webkit内核浏览器里的显示效果

 

column属性详解：

多列有四个属性，可以随意用1到4个：

  1. column-count：列数
  2. column-gap：两列中间的空隙;
  3. column-rule：两列中间的分割 比如：1px solid #333;
  4. column-width：每列固定宽度;

用到的css：

			-webkit-column-count: 3;
				-webkit-column-gap: 10px;
				-webkit-column-rule:5px solid #333;
				-webkit-column-width:100px;

				-moz-column-count: 3;
				-moz-column-gap: 20px;
				-moz-column-rule:5px solid #333;
				
				column-count: 3;
				column-gap: 10px;
				column-rule:5px solid #333;
				column-width:50px;

查看demo记得用firefox、以及chrome和Safari浏览哦

w3c官方的解释

CSS3info

前端技术 冰剑 css3  column  
腾讯微博邀请码十三个（已经全部注册完毕） Css content属性详解 »

相关文章

4 条留言

我要留言
  • 1 F

    郑州房产网  |  2010-6-1 10:00:01  

    css3+html5很厉害，
    可是很多浏览器不支持啊！
    现在都采用渐进增强的模式了

    [Reply]

  • 2 F

    郑州房产网  |  2010-6-1 10:02:09  

    css3+html5是很强的！
    切页面可以去掉很多装饰性的标记
    更语义化
    但是很多浏览器不支持
    估计要普及
    还得几年！那时候咱们都不做技术了

    [Reply]

  • 3 F

    caixw  |  2010-8-9 20:48:54  

    现在浏览器支持不够。

    [Reply]

  • 4 F

    风儿u风儿u  |  2011-8-19 11:47:23  

    现在就是在使用多栏，但是不知道如何对多栏的标签进行定位，
    发现虽然显示的是多栏，但是在使用诸如offsettop ，offsetleft的时候
    实际的定位仍然是竖状网页的位置。

    [Reply]

(必填)
(必填，绝不公开)