html頁面中的堆疊圖像儘可能多的列

Question

另一個我的HTML/CSS/JS障礙。

我有12張照片，我需要適應一個頁面是這樣的：

• 他們應該佔據儘可能多的列可能（或許不超過4）
• 他們應該延伸到填滿所有可用空間（如果有一列，圖像的寬度爲100％，如果有兩個 - 50％，如果有三個 - 33％等等）
• 如果圖像落在下面，佈局應該更改爲更少的列一定的尺寸。

這段代碼指出了一些，但並沒有完全切斷它：只有當圖像在3列中時，圖像纔會填滿所有可用空間，並且它們會堅持160px的最小尺寸;並縮放頁面不正常，至少在Opera中：

img.photoGallery { 
    min-width: 160px; 
    max-width: 32%;  
    float: left; 
} 

表不能這樣做。 CSS似乎也沒有。我可能會訴諸JavaScript，儘管我不願意依賴它。那麼有沒有一個我不知道的技巧，哪個可以幫助我？

Answer 1

而不是「最大寬度：32％」，如果你把「寬度：100％」？如果你想讓圖像適合它的容器寬度，你應該把它的寬度設置爲100％。但是，我無法正確顯示您的佈局，因此這可能不是您要查找的內容。