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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python tkinter实现日期选择器
2021/02/22 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
精选干货:Java精选笔试题附答案
2014/01/18 面试题
幼儿园秋游活动方案
2014/01/21 职场文书
大学校庆策划书
2014/01/31 职场文书
事假请假条范文
2014/04/11 职场文书
机关保密承诺书
2014/06/03 职场文书
2014年营销工作总结
2014/11/22 职场文书
优秀员工自荐书
2015/03/06 职场文书
医院病假条范文
2015/08/17 职场文书
小学大队委竞选口号
2015/12/25 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
世界十大狙击步枪排行榜
2022/03/20 杂记