修改頁面大小時適合縮略圖

Question

假設我在網頁中顯示縮略圖（每個寬度大約200px）。在中型屏幕（例如15「）中，我可以連續顯示5個縮略圖。

現在如果我調整瀏覽器窗口的大小以使5個縮略圖不適合頁面寬度，我想要縮略圖的數量

例如：假設有5個縮略圖，它們之間的空格需要〜2000 px。現在我調整窗口大小。當頁面寬度變爲< 2000 px但> 1600 px。喜歡在一排等顯示4個縮略圖。

我應該使用什麼HTML/CSS標記來實現這一行爲呢？

Answer 1

我曾經做了一個fiddle解釋媒體查詢到的人。您可以使用類似的設計，但通常只需要float:left或display:inline-block您的元素，並讓瀏覽器處理剩下的事情就簡單多了。

DEMO

Answer 2

一種方法是使用響應式佈局。 Twitter Bootstrap默認情況下也是如此。

另一種方法是使用@media標籤。請參閱http://www.w3schools.com/css/css_mediatypes.asp。在這裏，您需要製作如下功能： 使用mediacheck獲取屏幕大小，然後使用@media設置閾值。

Answer 3

可以使用float property此：當他們不父的寬度適合

float: left; 

浮動元素會換行。

Example（嘗試調整大小的頁面）