中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

五、jQuery & CSS　智能欄

上面的修復方法解決了高度變換的div的問題。但對于想使用相等高度的布局來說，這未必是一個好的辦法，Soh Tanaka 在他的 SohTanaka.com 網站上提供了一個jQuery腳本和一個智能的css使流動布局的欄能很漂亮的折疊和擴展，查看演示頁Smart Columns w/ CSS & jQuery

jQuery & css智能欄是什么？

智能欄是一個腳本，為了得到更好的視覺效果，它改變divs的寬度，并決定在瀏覽器當前頁面尺寸下會呈現多少欄？對于用戶調整瀏覽器也很完美，而不是進入網頁時僅僅照顧瀏覽器的尺寸。

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

如何使用智能欄

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

<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代碼插入到頁面之中，這樣智能欄就能實現。自定義代碼很簡單，只需簡單的在css中編輯width、height、margin即可。

出處：藍色理想
責任編輯：bluehearts

上一頁 自適應css布局——流動布局新時代 [6] 下一頁 自適應css布局——流動布局新時代 [8]

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。