CSS(Cascading Style Sheets)是一種用于對HTML和XML等文檔進行樣式表(stylesheet)設計的語言。CSS可以通過各種方式來應用到HTML文檔,其中之一是通過等量切割實現多列布局。
#container { width: 960px; margin: 0 auto; text-align: justify; } .col { width: 33%; display: inline-block; vertical-align: top; margin-left: -4px; *display: inline; zoom: 1; } .col:first-child { margin-left: 0; } p { margin-bottom: 20px; text-align: left; }
在上述代碼中,使用了等量切割的技術,將一個固定寬度的容器分成了三列。每一列的寬度都是容器寬度的三分之一(33%),并且通過使用display:inline-block屬性來實現列的橫向排列。為了解決inline-block元素之間出現4像素空隙的問題,使用了margin-left:-4px和*display:inline兩種技巧。其中,*display:inline是針對IE6及以下版本瀏覽器兼容的處理方式。
最后,在每一個列(col)中,通過設置vertical-align:top屬性來讓列中的內容頂部對齊,并且為了保證每一列中的文本對齊,設置了text-align:justify,將每一行的文本寬度均分。
上一篇ajax太多會影響優化嗎
下一篇css如何設置高亮顯示