首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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. width: 600px;   
  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属性对齐列内容高度的用法详解

CSS3的column-fill属性对齐列内容高度的用法详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 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
GUI(2) 数据处理(2) feDisplacementMap(1) agg(1) Tkinter(4) apply(1) pandas(7) Pool(1) sortInts(1) WebSockets(3)
You might like
PHP 透明水印生成代码
2012/08/27 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php打造智能化的柱状图程序，用于报表等
2015/06/19 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
用js重建星际争霸
2006/12/22 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
layui实现数据分页功能
2019/07/27 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python实现IOU计算案例
2020/04/12 Python
Python实现动态循环输出文字功能
2020/05/07 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python遍历路径破解表单的示例
2020/11/21 Python
Luxplus丹麦：香水和个人护理折扣
2018/04/23 全球购物
全球最大的瓷器、水晶和银器零售商：Replacements
2020/06/15 全球购物
乌克兰设计师和品牌的服装：Love&Live
2020/04/14 全球购物
私人会所最新创业计划书范文
2014/03/24 职场文书
领导干部保密承诺书
2014/08/30 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
人事代理委托书
2014/09/27 职场文书
老干部工作汇报材料
2014/10/28 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书