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制作的20种loading动效
Jul 05 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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 无线电
ADODB的数据库封包程序库
2006/12/31 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python游戏开发的五个案例分享
2020/03/09 Python
django 实现简单的插入视频
2020/04/07 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
人力资源部经理助理岗位职责
2014/03/04 职场文书
工厂搬迁方案
2014/05/11 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
运动会致辞稿
2015/07/29 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
Redis三种集群模式详解
2021/10/05 Redis
Java中的继承、多态以及封装
2022/04/11 Java/Android