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

销售前的奉承,不如售后服务。这是制造“永久顾客”的不二法则。那些花了好久才想明白的事,总是会被偶尔的情绪失控全部推翻。

column-fill 属性, 指定列之间高度是否对齐时使用。<规定如何对列进行填充>

属性值
balance可能的话,所有的列内容以相同方法对齐(默认值) <对列进行协调。浏览器应对列长度的差异进行最小化处理。>
auto后面的列填充在第一个列的后面。 <按顺序对列进行填充,列长度会各有不同。>
※<>内容为其他网站转载内容

实例代码

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-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_sample1p{
  15. -moz-column-fill:balance;
  16. -webkit-column-fill:balance;
  17. -o-column-fill:balance;
  18. -ms-column-fill:balance;
  19. }
  20. div.prefix_sample2p{
  21. -moz-column-fill:auto;
  22. -webkit-column-fill:auto;
  23. -o-column-fill:auto;
  24. -ms-column-fill:auto;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <divclass="prefix_sample">
  30. <h5>LLLLLLLLL…</h5>
  31. <p>
  32. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  33. </p>
  34. <p>
  35. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  36. </p>
  37. <h5>LLLLL…</h5>
  38. <p>
  39. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  40. </p>
  41. <p>
  42. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  43. </p>
  44. </body>
  45. </html>

实例图

以上就是CSS3的column-fill属性对齐列内容高度的用法详解。活得像自己就好了,何必在意那么多。更多关于CSS3的column-fill属性对齐列内容高度的用法详解请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
css3 column如何实现卡片瀑布流布局的示例代码

CSS3 Columns分列式布局方法简介

如何利用column多列属性调整页面文字列布局