響應式縮略圖網格調整寬度

Question

當寬度變化時，自動調整大小的響應式縮略圖網格必須非常容易。但我所看到多種方式如何縮略圖網格是由一些使用排序列表結構：

<ol> 
<li><img scr=""/></li> 
<li><img scr=""/></li> 
</ol> 

其他只使用一個div和IMG結構等什麼是讓格縮覽圖的最佳方式？

在我的示例中，我將內容集中在瀏覽器中，最大寬度爲750px，我希望放置5個方形縮略圖，以填充該空間的100％，並在寬度更改時自動調整大小。另外我想玩他們之間的空間添加空間或刪除所有空間，然後決定，但保持100％的寬度的內容區域，並增加內容文本之間的頂部和底部的空間。

這裏是Fiddle

Answer 1

不要緊，不管你使用的DIV或無序甚至是有序列表。我傾向於爲這種情況選擇一個無序列表，因爲它對我而言在語義上是合適的。但是佈局魔術發生在你的樣式表中。

爲什麼我用列表的一個原因是，它往往就派上用場了，你得到的

• 列表層次​​
  • 項目
    • 內容

因此，您可以使用列表項目大小與容器相關的容器列表（在您的案例中爲20％），而每個列表項目的內容可以根據其列表項目父項進行佈局。你可以在列表中浮動列表項（所以不要忘記在僞元素之後清除float）或將顯示設置爲內聯塊（然後你必須將列表中的LI標籤之間的任何空格去掉防止任何缺口）。

提示：作爲相對垂直填充是相對於總是計算父元素的寬度（不高度！），它可以讓你給每個列表項固定寬/高比。由於您希望縮略圖爲正方形，因此可以將列表項目padding-bottom設置爲與width: 20%相同的值。如果您不使用圖像元素，而是使用背景圖像，則此功能特別有用。缺點是任何項目內容必須在項目內定位絕對。

我已經改變了相應的提琴：http://jsfiddle.net/Lmmdj2yq/6/

只要列表項之間的間距是指相對於列表容器中，也僅僅是一個位數學的。像例如5％在這updated fiddle。 5個項目之間有4個5％的溝槽。因此設置margin: 0 5% 5% 0和width: 16%（=（100％-5％* 4排水溝）/ 5項）。每個列表項的：第n個孩子（5n）必須將其邊距權設置爲0才能使其工作。

只要你想固定天溝，它變得越來越棘手。我通常會在fiddle中執行某些操作，並可能需要添加標記（我添加了鏈接標記）。水平間距通過列表項的填充（項目有box-sizing: border-box;），通過邊距的垂直間距來定義。列表容器兩邊都有負邊距。檢查樣式。