我正在创建一个网页,遇到了一个问题,我的页面中的 Flex 上显示了 4 个图像,当我单击“检查”并查看它在其他设备上的显示方式时,我看到顶部有 2 个图像,还有 2 个图像在底部。在此处输入图像描述
但是当我返回并在笔记本电脑上显示它时,我看到顶部有 3 个图像,底部有 1 个图像,请在此处输入图像描述
我想知道我可以做些什么来修复它,以便它始终显示第一张图片中的图像(顶部 2 个,底部 2 个)。
这是我的一段代码
img { width: 350px; padding: 5px; transition: transform .2s; } img:hover { cursor: pointer; transform: scale(1.03); } .container { margin-top: 80px; display: flex; max-width: 1500px; width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; }
浏览器将在一行上容纳尽可能多的宽度为 350 像素的图像。如果不适合,它会将它们换行到下一行。
如果您希望弹性框中每行始终有两个图像,您可以将图像的宽度设置为屏幕宽度的 50%。因为每边都有 5px 的填充,所以您可以使用 calc() 函数从 50% 中减去它,如下所示:
以下是您的代码的示例: