首页
所有分类
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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 video标签（播放器）学习笔记（二）:播放控制
Apr 24 HTML / CSS
详解html5 canvas 微信海报分享（个人爬坑）
Jan 12 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 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
greenlet(1) Coroutine(1) find(1) 进销存(1) zip(1) csv(4) list(1) enumerate(1) pytest(3) gevent(1)
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
隐性调用php程序的方法
2015/06/13 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
2017/08/04 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
python中list常用操作实例详解
2015/06/03 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python实现ATM系统
2020/02/17 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Spartoo美国：欧洲排名第一的在线时装零售商
2019/12/12 全球购物
英国领先的男装设计师服装独立零售商：Repertoire Fashion
2020/10/19 全球购物
运动会方阵解说词
2014/02/12 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
教师工作证明范本
2015/06/12 职场文书