欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3的column-fill屬性對齊列內(nèi)容高度的用法詳解

css3html5   發(fā)布時(shí)間：2016-07-01 11:58:21   作者：ttwinbug   我要評論
column-fill屬性會(huì)將不同高度的指定列以高度差最小化的方式進(jìn)行對齊,這里我們就來看一下CSS3的column-fill屬性對齊列內(nèi)容高度的用法詳解:

column-fill 屬性, 指定列之間高度是否對齊時(shí)使用。<規(guī)定如何對列進(jìn)行填充>

屬性值
balance 可能的話，所有的列內(nèi)容以相同方法對齊（默認(rèn)值） <對列進(jìn)行協(xié)調(diào)。瀏覽器應(yīng)對列長度的差異進(jìn)行最小化處理。>
auto 后面的列填充在第一個(gè)列的后面。 <按順序?qū)α羞M(jìn)行填充，列長度會(huì)各有不同。>
※<>內(nèi)容為其他網(wǎng)站轉(zhuǎn)載內(nèi)容

實(shí)例代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  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>  

實(shí)例圖
201671115856287.jpg (603×369)

相關(guān)文章

  • 基于CSS3的CSS 多欄(Multi-column)實(shí)現(xiàn)瀑布流源碼分享

    瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。我們只
    2014-06-11

  • CSS3 Columns分列式布局方法簡介

    CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局
    2014-05-03

  • css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼

    這篇文章主要介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-22

最新評論