首页
所有分类
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 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 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
tfx(1) nacos(1) OpenAI baselines(1) 面向接口(1) MyBatis(5) OpenGL(1) cv2(1) Android Studio(4) Flask Web(1) exec(1)
You might like
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
Jquery实现的角色左右选择特效
2014/05/21 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
django页面跳转问题及注意事项
2019/07/18 Python
python多线程同步实例教程
2019/08/11 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python过滤序列元素的方法
2020/07/31 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python jieba库分词模式实例用法
2021/01/13 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
美国旅游网站：Tours4Fun
2017/02/17 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
小学优秀学生评语
2014/12/29 职场文书
商务邀请函
2015/01/30 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
旷工检讨书大全
2015/08/15 职场文书
iPhone13再次曝光
2021/04/15 数码科技
ztree+ajax实现文件树下载功能
2021/05/18 Javascript