五、jQuery & CSS　智能欄

上面的修復(fù)方法解決了高度變換的div的問(wèn)題。但對(duì)于想使用相等高度的布局來(lái)說(shuō)，這未必是一個(gè)好的辦法，Soh Tanaka 在他的 SohTanaka.com 網(wǎng)站上提供了一個(gè)jQuery腳本和一個(gè)智能的css使流動(dòng)布局的欄能很漂亮的折疊和擴(kuò)展，查看演示頁(yè)Smart Columns w/ CSS & jQuery

jQuery & css智能欄是什么？

智能欄是一個(gè)腳本，為了得到更好的視覺(jué)效果，它改變divs的寬度，并決定在瀏覽器當(dāng)前頁(yè)面尺寸下會(huì)呈現(xiàn)多少欄？對(duì)于用戶調(diào)整瀏覽器也很完美，而不是進(jìn)入網(wǎng)頁(yè)時(shí)僅僅照顧瀏覽器的尺寸。

腳本去掉每欄多余的空白－－這可能是有瀏覽器的不同寬度導(dǎo)致的，然后用jQuery使欄均勻分布。

如何使用智能欄

在Soh Tanakas博客的 Smart Columns w/ CSS & jQuery
回帖中含有所有代碼，它可以用列表設(shè)置，每個(gè)li作一個(gè)塊。

<ul class="column">
 <li>
  <div class="block">
  Block 1
  </div>
 </li>

 <li>
  <div class="block">
  Block 2
  </div>
 </li>

 <li>
  <div class="block">
  Block 3
  </div>
 </li>
</ul>

然后將css和jQuery代碼插入到頁(yè)面之中，這樣智能欄就能實(shí)現(xiàn)。自定義代碼很簡(jiǎn)單，只需簡(jiǎn)單的在css中編輯width、height、margin即可。