如何造型照片庫？

我正在尋找一種方法來設計照片gallary，我目前使用表，但不知道如果它是一個正確的方法來做到這一點，也不知道造型。如何造型照片庫？

它有很多圖片，上傳是用來上傳照片和消息是用來顯示上傳消息。

我只需要顯示圖像並允許用戶在服務器上保存圖像，並顯示消息（上傳/無法上傳）。我可以顯示圖像，保存它們並將消息發送到消息部分，但不知道如何設計它的樣式。

另一個問題是我需要所有圖像都在相同的大小，因爲現在每個圖像都在不同的大小。

我需要它在所有瀏覽器上都是一樣的。

<table> 
<tbody> 
<tr> 
    <td><img 1></td> 
    <td>upload photo btn</td> 
    <td><label>message</label></td> 
    <td><img 3></td> 
    <td>upload photo btn</td> 
    <td><label>message</label></td> 
</tr> 
</tbody> 
</table>

來源

2013-06-01 J888

你想要的畫廊做什麼？放大onClick等，或者你只是想圖像很好地顯示在一個頁面上？ – Vector

只需要顯示它們。問題已更新。 – J888

語義表應該用於表格數據。

請查看this question的答案，瞭解一些選項。根據您想要支持的瀏覽器的使用年限，您也可以考慮使用flex box layout。 Flex盒子非常好，易於編碼，但在所有瀏覽器中尚未完全支持。

來源

2013-06-01 07:10:00

感謝問題已更新。 – J888

根據我這不應該完成使用表，更好的方法是通過使用CSS3 column-count屬性，這種方式，你可以將你的內容分割爲任意數量的列你想要的，這樣你不用不用爲了使用表太..

Demo

Demo（由-webkit支持）

html, body { 
    width: 100%; 
    height: 100%; 
} 

.wrap { 
    column-count: 3; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
} 

.holder { 
    border: 1px solid #f00; 
} 

img { 
    max-width: 100%; 
}

注：column-count CSS3屬性沒有得到廣泛的支持，但也有許多polyfills可用了，你可以在網上搜索，並使用它跨瀏覽器兼容

來源

2013-06-01 07:16:42

謝謝如何保持圖像的大小相同？ – J888

@JackRamzi它響應，調整窗口大小，你會看到圖像大小調整 –

如何造型照片庫？

回答

相關問題