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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
popdiv
2006/07/14 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
独特的python循环语句
2016/11/20 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python 接收处理外带的参数方法
2018/12/03 Python
python实现超级马里奥
2020/03/18 Python
python redis存入字典序列化存储教程
2020/07/16 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
车辆年审委托书范本
2014/09/18 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书