首页  >  文章  >  web前端  >  在CSS3中column-fill属性对齐列内容高度的用法详解

在CSS3中column-fill属性对齐列内容高度的用法详解

高洛峰
高洛峰原创
2017-03-08 13:48:051914浏览

column-fill属性会将不同高度的指定列以高度差最小化的方式进行对齐,这里我们就来看一下CSS3的column-fill属性对齐列内容高度的用法详解:

column-fill 属性, 指定列之间高度是否对齐时使用。cf821d91f7a22d0312ea4da875ca2021

属性值
balance 可能的话,所有的列内容以相同方法对齐(默认值) 0283df7fa08c6c9aa89fdb91b722f217
auto 后面的列填充在第一个列的后面。 06167c95d9c609b12dc03c1735cb90fc
※a8093152e673feb7aba1828c43532094内容为其他网站转载内容

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title> column-fill </title>   
<style>   
p.prefix_sample1, p.prefix_sample2 {   
width: 600px;   
-moz-column-width: 10em;   
-webkit-column-width: 10em;   
-o-column-width: 10em;   
-ms-column-width: 10em;   
}   
p.prefix_sample1 p {   
-moz-column-fill: balance;   
-webkit-column-fill: balance;   
-o-column-fill: balance;   
-ms-column-fill: balance;   
}   
p.prefix_sample2 p {   
-moz-column-fill: auto;   
-webkit-column-fill: auto;   
-o-column-fill: auto;   
-ms-column-fill: auto;   
}   
</style>   

</head>   

<body>   
<p class="prefix_sample">   
<h5>LLLLLLLLL…</h5>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<h5>LLLLL…</h5>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
</body>   
</html>


实例图
在CSS3中column-fill属性对齐列内容高度的用法详解

以上是在CSS3中column-fill属性对齐列内容高度的用法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn