首页
所有分类
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实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 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) Windows server 2008(5) 域控制器(1) Ubuntu Server(6) 3389(1) systemctl(1) DHCP(2) 远程登录(2) 防火墙(2) FTP(9)
You might like
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
Javascript !!的作用
2008/12/04 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jQuery Validate格式验证功能实例代码（包括重名验证）
2017/07/18 jQuery
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Flask配置Cors跨域的实现
2019/07/12 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
西班牙创意礼品和小工具网上商店：Curiosite
2016/07/26 全球购物
商务助理岗位职责
2013/11/13 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
关于读书的演讲稿
2014/05/07 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书