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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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/01 无线电
php中大括号作用介绍
2012/03/22 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP单链表的实现代码
2016/07/05 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
js对象的比较
2011/02/26 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
高三学生评语大全
2014/04/25 职场文书
企业安全标语
2014/06/07 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
python如何读取.mtx文件
2021/04/22 Python
PHP 时间处理类Carbon
2022/05/20 PHP