CSS教學-CSS3 屬性column-count製作瀑布流版型

梅問題-CSS3瀑布流版型編排
  之前曾分享過,利用jQuery套件製作瀑布流的網頁版型,相關文章請見「jQuery Masonry瀑布流版型套件」,這個瀑布流的版型,打破了以往傳統的編排模式,讓每個Div可以隨著高度,自行的向上靠齊,讓畫面變得更有變化性,除了用jQuery的套件來製作外,其實也可透過CSS3的方式來製作,方法更簡單,語法更簡潔,就可以達到相同的效果,與jQuery最大的差別就在於,CSS3需要IE10.0才有支援。
  透過CSS3產生的瀑布流版型,會比jQuery來的更即時,不會一開始會先集中在一起,等到計算出每個Div的高度後,再組合起來,但經CSS3部分,就不會有此問題,且無論圖片載入快慢,都不會出現Div重疊的問題,而CSS3有許多相當方便的語法,但都礙於IE的限制,使得網頁設計起來綁手綁腳的,因此當要使用CSS3來打造時,可要先觀查一下,網站的使用者,習慣用什麼樣瀏覽器,若是以IE為首的話,建議還是先採用jQuery的方式,若不是的話,那就恭喜你,可放心的使用啦!
CSS3-column-count:
使用語法:CSS3
支援瀏覽器:Chrome、Firefox、Safari、Oprea、IE10.0

CSS3-column-count語法說明:
column-count: 欄位數
column-width:欄位寬度
column-gap: 欄位間距
column-rule:欄位格線
梅問題-CSS3瀑布流版型編排

CSS3-column-count實作:
#css:
#outbox{
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width:734px; 
	margin:0 auto;
}

.content_box{
	width:337px;
	display: inline-block;
	font-size:12px;
	border: 1px dotted #4F4F4F;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	font-size:15px;
	line-height: 1.5em;
	letter-spacing: 1pt;
	color:#353535;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;		
}
#html:
<div id="outbox">
   <div class="content_box">1</div>
   <div class="content_box">2</div>
   <div class="content_box">3</div>
   <div class="content_box">4</div>   
</div>

[範例預覽] [範例下載]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    Ronald 說道:

    感謝分享,透過這個CSS設定也可以做出瀑布流式的布局(無限下拉),不過這個欄位的特性式,他會先填滿左邊,再填到右邊去,最後還是只好回去用masonry了