CSS3的column-fill属性对齐列内容高度的用法详解


Posted in HTML / CSS onJuly 01, 2016

column-fill 属性, 指定列之间高度是否对齐时使用。<规定如何对列进行填充>

属性值
balance 可能的话,所有的列内容以相同方法对齐(默认值) <对列进行协调。浏览器应对列长度的差异进行最小化处理。>
auto 后面的列填充在第一个列的后面。 <按顺序对列进行填充,列长度会各有不同。>
※<>内容为其他网站转载内容

实例代码

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title> column-fill </title>   
  6. <style>   
  7. div.prefix_sample1, div.prefix_sample2 {   
  8. width600px;   
  9. -moz-column-width: 10em;   
  10. -webkit-column-width: 10em;   
  11. -o-column-width: 10em;   
  12. -ms-column-width: 10em;   
  13. }   
  14. div.prefix_sample1 p {   
  15. -moz-column-fill: balance;   
  16. -webkit-column-fill: balance;   
  17. -o-column-fill: balance;   
  18. -ms-column-fill: balance;   
  19. }   
  20. div.prefix_sample2 p {   
  21. -moz-column-fill: auto;   
  22. -webkit-column-fill: auto;   
  23. -o-column-fill: auto;   
  24. -ms-column-fill: auto;   
  25. }   
  26. </style>   
  27.     
  28. </head>   
  29.     
  30. <body>   
  31. <div class="prefix_sample">   
  32. <h5>LLLLLLLLL…</h5>   
  33. <p>   
  34. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
  35. </p>   
  36. <p>   
  37. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
  38. </p>   
  39. <h5>LLLLL…</h5>   
  40. <p>   
  41. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
  42. </p>   
  43. <p>   
  44. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
  45. </p>   
  46. </body>   
  47. </html>  

实例图
CSS3的column-fill属性对齐列内容高度的用法详解

HTML / CSS 相关文章推荐
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 #HTML / CSS
老生常谈CSS中的长度单位
Jun 27 #HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 #HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 #HTML / CSS
CSS3实现3D翻书效果
Jun 20 #HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 #HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
You might like
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python之变量类型和if判断方式
2020/05/05 Python
python 19个值得学习的编程技巧
2020/08/15 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
综艺节目策划方案
2014/06/13 职场文书
班级体育活动总结
2014/07/05 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
校长师德表现自我评价
2015/03/05 职场文书
学前班教学反思
2016/02/24 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL