CSS3教程(6):创建网站多列


Posted in HTML / CSS onApril 02, 2009

使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。
使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。
上一篇文章:CSS3教程(5):网页背景图片
与多背景图片一样,CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法,请在下面的评论中提交你的链接,我很高兴能确认这种方法能用于很多中布局中。
跨浏览器兼容性:
比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome,这样我们就需要使用-moz和-webkit前缀了。 CSS3多列(宽度)
CSS3教程(6):创建网站多列
上面的截图是使用了下面的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教程(6):创建网站多列
    上面的截图是使用了下面的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…)
HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
You might like
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php中的动态调用实例分析
2015/01/07 PHP
php中错误处理操作实例分析
2019/08/23 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
phpwind放自动注册方法
2006/12/02 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
python的几种开发工具介绍
2007/03/07 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python图像处理入门(一)
2019/04/04 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python编写万花尺图案实例
2021/01/03 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
西部世纪.net笔试题面试题
2014/04/03 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
小学生家长评语集锦
2014/01/30 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
医学专业大学生求职信
2014/07/12 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
创业计划书之美容店
2019/09/16 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python