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 相关文章推荐
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 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使用者状态管理功能的应用
2006/10/09 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
js实现一键复制功能
2017/03/16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
JavaScript简易计算器制作
2020/01/17 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
使用Python写个小监控
2016/01/27 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
七年级政治教学反思
2014/02/03 职场文书
七一建党节演讲稿
2014/09/11 职场文书