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

语义表应该用于表格数据。

查看this question的答案，了解一些选项。根据您要支持的浏览器的年龄，您还可以考虑使用flex box layout。 Flex盒很好且易于编码，但尚未在所有浏览器中完全支持。

Answer 2

据我说这不应该使用表来完成，更好的方法是使用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属性不受广泛支持，但在那里有多种填充剂可供选择，您可以在线搜索并使用它跨浏览器兼容性

如何设置照片库的样式？

2 个答案: