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之多背景background使用示例
Oct 18 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
利用python循环创建多个文件的方法
2018/10/25 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python同时迭代多个序列的方法
2020/07/28 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
美容院考勤制度
2014/01/30 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
用python批量解压带密码的压缩包
2021/05/31 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
 python中的元类metaclass详情
2022/05/30 Python