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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 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支持页面回退的两种方法
2008/01/10 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python xlsxwriter模块的使用
2020/12/24 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
自主招生自荐书
2013/11/29 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
golang中字符串MD5生成方式总结
2021/07/04 Golang