使缩略图响应

Question

我在使客户的网站响应时遇到问题。我希望页面主图像下方的所有缩略图与主图像的右侧和左侧对齐，但我不确定在尝试使它们以百分比宽度响应时是否有可能。是否有跨浏览器兼容的解决方法？我一直在搜索和搜索，尝试了各种各样的贫民窟操纵的东西，但到目前为止还没有运气。这是她的网站：http://www.courtneykingstudios.com/

这就是我希望它在所有屏幕尺寸下的外观：

这是它目前在较小的屏幕尺寸中失真的方式：

Answer 1

您在px 中设置margins，我认为这是问题所在。而且我不知道为什么你在#wrapper 上设置padding-left 用于缩略图，而你的“我想要什么”并不建议你这样做。你也应该发布你的代码！

解决方案（当您不希望连续排列 5 个缩略图的末尾和开头有间隙时）：

.thumb1 {
    width: 19%;
    margin: 0.5% 0 0.5% 1.25%;
    float: left;
}

.thumb1:first-child {
    margin-left: 0;
}

请注意，您无需更改 CSS @media 中的%s（针对不同的屏幕尺寸），除非您想更改连续缩略图的数量。

如果您不需要，还可以从#wrapper 中删除paddings。