如何為相冊設置樣式？

Question

我正在尋找一種設計照片庫的方法，我目前正在使用桌子，但不確定是否正確的方法來做，也不確定樣式。

它有很多圖像，上載用於上載照片，消息用於顯示上載消息。

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

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

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

<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>

Answer 1

語義表應用於表格數據。

查看此問題的答案以了解一些選項。 根據您要支持的瀏覽器的年齡，您還可以考慮使用彈性框布局 。 Flex box非常好用，易於編碼，但尚未在所有瀏覽器中完全支持。

Answer 2

根據我的說法，這不應該使用表來完成，更好的方法是使用CSS3 column-count屬性，這樣您就可以將內容分割成任意數量的列，而不必也必須使用表格。

演示版

演示 （添加了-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屬性不受廣泛支持，但是有很多可用的polyfill，您可以在線搜索並將其用於跨瀏覽器兼容性