首页
所有分类
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 3D立方体效果示例－transform也不过如此
Dec 05 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5边玩边学（3）像素和颜色
Sep 21 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
军机(1) VOLVO(1) BOSE(2) 77A(2) 沃尔沃(1) 晶体管(2) MOTOROLA(1) 收信机(3) 摩托罗拉(1) 66-XI(1)
You might like
php 删除记录实现代码
2009/03/12 PHP
php at(@)符号的用法简介
2009/07/11 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
javascript设计模式Constructor（构造器）模式
2016/08/19 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python中必要的名词解释
2019/11/20 Python
python中的yield from语法快速学习
2020/11/06 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
健身场所或家用健身设备：Life Fitness
2017/11/01 全球购物
女性时尚在线：IVRose
2019/02/23 全球购物
Lovedrobe官网：英国领先的大码服装品牌
2019/09/19 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
单位委托书
2014/10/15 职场文书
家长高考寄语
2015/02/27 职场文书
小学体育课教学反思
2016/02/16 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android