如何为相册设置样式？

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，您可以在线搜索并将其用于跨浏览器兼容性