使缩略图响应

Question

我在让客户的网站响应时遇到问题。我想要了解页面下面的所有缩略图＆＃39;主图像与主图像的右侧和左侧对齐，但我不确定在尝试使用百分比宽度响应时是否可以。是否存在跨浏览器兼容的解决方案？我搜索和搜索过，尝试过各种各样的贫民窟，但到目前为止还没有运气。这是她的网站：http://www.courtneykingstudios.com/

这就是我想要查看所有屏幕尺寸的方法：

这就是目前它在较小的屏幕尺寸中变形的方式：

Answer 1

您在margins设置px，我认为这是问题所在。我不知道为什么当你的“我想要的”并不是你想要的时候，padding-left为#wrapper设置了缩略图。你也应该发布你的代码！

解决方案（因为，当你不想在最后和连续排列的5个缩略图的开头有间隙时）：

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

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

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

如果您不需要，请从padding删除#wrapper。