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+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 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
香妃
2021/03/03 冲泡冲煮
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
AngularJS 日期格式化详解
2015/12/23 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
详解Python做一个名片管理系统
2019/03/14 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
模范教师事迹材料
2014/02/10 职场文书
初中班主任寄语
2014/04/04 职场文书
五年级学生评语
2014/04/22 职场文书
销售员态度差检讨书
2014/10/26 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
丧事答谢词大全
2015/09/30 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
完美解决golang go get私有仓库的问题
2021/05/05 Golang