繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS3教程(6):创建网站多列
- CSS样式表
- 关于CSS控制DIV水平居中问题
- CSS:相同元素不同结构重复定义的问题
- 关于DIV CSS和XHTML CSS的理解
- CSS教程：简单理解em
- CSS教程:导致一些问题的overflow
- CSS常用属性的代码简化实例
- CSS教程：总结清除浮动的方法
- 网页设计中典型的header代码结构
- CSS初学者常犯错误汇总
- CSS网页布局：div水平居中的各种方法
- CSS Div网页布局中的结构与表现
- CSS教程：简化CSS中属性的示例
- CSS网页布局：div垂直居中的各种方法
- acronym标记和abbr标记的不同之处
- CSS编写的网页打开流畅相关知识与注意点
- 你知道CSS中长度单位pt、px、dpi的意思吗？
- CSS页面布局中HTML结构化
- CSS选择器的使用技巧
- CSS教程：网页图片垂直居中的使用技巧
- dl,dt,dd标记在网页中要充分利用
CSS样式表 中的 CSS3教程(6):创建网站多列
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 37 ::
收藏到网摘: n/a
使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。
与多背景图片一样，CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法，请在下面的评论中提交你的链接，我很高兴能确认这种方法能用于很多中布局中。
跨浏览器兼容性：
比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome，这样我们就需要使用-moz和-webkit前缀了。
CSS3多列(宽度)
上面的截图是使用了下面的CSS3样式的效果：
#multiColumnWidth { text-align: justify; -moz-column-width: 20em; -moz-column-gap: 2em; -webkit-column-width: 20em; -webkit-column-gap: 2em;
}
浏览器支持：
- Firefox(3.05+…)
- Google Chrome(1.0.154+…)
- Google Chrome(2.0.156+…)
- Internet Explorer(IE7, IE8 RC1 )
- Opera(9.6+…)
- Safari(3.2.1+ windows…)
CSS3多列(列数)
上面的截图是使用了下面的CSS3样式的效果：
#multiColumnCount { text-align: justify; -moz-column-count: 3; -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #dedede; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #dedede;
}
浏览器支持：
- Firefox(3.05+…)
- Google Chrome(1.0.154+…)
- Google Chrome(2.0.156+…)
- Internet Explorer(IE7, IE8 RC1 )
- Opera(9.6+…)
- Safari(3.2.1+ windows…)
评论 (0) All
