CSS, CSS3, 網頁設計

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

2013/02/04
梅問題-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>

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