用css排列縮圖

 

Floating Thumbnailshttp://realworldstyle.com/thumb_float.html 用css排列縮圖 問題：如果你需要一些縮圖來連結到真實的大圖，這是一個很常見的應用。再複雜一點，每個縮圖都有一個標題需要放在圖下面。因此，你需要將圖片以行為單位排列在螢幕上。但是當瀏覽器視窗不同時，圖片將會自動調整行數（流體布局）。我們不用table，而是用css來完成。 一步一個膠印第一：每個縮圖需要一個排在下面、中間的標題。如果用table，每個圖片/標題對需要一個td。用css需要將它們放在一個div中。為了讓它們在水平方向上一行一行排列，需要將所有這些div浮動到左邊。因此，得到：

div.float {

 float: left;

 width: 120px;

 padding: 10px;

 }

div.float p {

   text-align: center;

   }

html代碼:

<div class="float">

 <img src="image1.gif"><br>

 <p>caption 1</p>

</div>：

<div class="float">

 <img src="image2.gif"><br>

 <p>caption 2</p>

</div>

<div class="float">

 <img src="image3.gif"><br>

 <p>caption 3</p>

</div>

 第二步，讓縮圖在需要的時候換行。其實，上面使用了float之後，已經滿足了這個需要。當視窗大時，但視窗變小的時候，縮圖自己調整了行數。 第三步，如果你的縮圖有好幾類，你想顯式地用背景或邊框來區別。那麼使用div將同一類的放在一起。

div.container {

 border: 2px dashed #333;

 background-color: #fff;

 }

但是這樣做有一個問題。因為float的原因，一個float的元素將不在正常的文檔流中占空間，這會造成container無法包括你想包括進去的圖片，因此加入clear。 

div.spacer {

 clear: both;

 }

現在的代碼如下，注意在代碼的開始和結束處都有sapcer。

<div class="container">

<div class="spacer">

  

</div>

<div class="float">

 <img src="image1.gif"><br>

 <p>caption 1</p>

</div>

<div class="float">

 <img src="image2.gif"><br>

 <p>caption 2</p>

</div>

<div class="float">

 <img src="image3.gif"><br>

 <p>caption 3</p>

</div>

<div class="spacer">

  

</div>

</div>

視窗足夠大的時候，

視窗小的時候，虛線的邊框也跟著變化了。