我无法弄清楚这一点。我想要 3 张图像并排放置在 930 像素宽的 div 中。
因此，当您进入响应式设计模式时，或明智地拖动屏幕浏览器宽度以使其更小时，所有 3 个图像并排在 div 内，而不会换行到下一行。
但会自动开始重新调整大小以适应重新调整大小的 div。
仅当第三张图像包裹在第二张图像下时，这 3 张图像才开始在 div 内正确调整大小。所以它看起来像下面这样。
[]
[]
[]
一旦所有图像垂直对齐，图像就会开始正确缩小。但是这张图片包裹在下一张图片下对我来说并不好，因为在手机上查看网站时，或者重新调整屏幕大小时，图像仍然超大。
必须是一种阻止这些图像相互缠绕的方法，并且只是保持内联，但随着 div/页面宽度的缩小而自动重新调整自己的大小？
我试过空白： nowrap; 显示：内联；内联块；偶数显示：表格单元格；似乎没有什么可以做我需要它做的事情。但是，如果我只使用一个图像而不是 2 个或 3 个，那么它就可以正常工作。
您可能在想，为什么不将所有 3 张图像放在 Photoshop 中的 1 张图像中？那么每个 img 都是一个 href 链接，所以这是不可能的。即使将图像全部向左浮动仍然无济于事。
这是我的 CSS/HTML
img {
max-width: 100%;
height: auto;
}
然后
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>
有人可以告诉我我可能哪里出错了吗？当父容器缩小时，如何停止图像包裹在其他图像下方。
我不得不求助于每个断点使用多个不同预先固定图像大小的@media 查询。但必须有一个更简单的方法。一些很简单的东西，我错过了。
有人可以告诉我这是否是 Flexbox 的一个未记录的错误，或者我只是做错了？我有 3 个图像在 div 容器内排成一行。这对人们来说很简单。
如果没有任何超链接，所有 3 个图像都会按其应有的方式完美缩小。
<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
<a href=""><img src="flash-tooltip.png"></a>
<img src="html-tooltip.png">
<img src="portables-tooltip.png">
</div>
现在，在所有设备上查看时，3 个图像中只有 2 个会正确缩小，具体取决于通过视口手动最大化拖动浏览器。
唯一不会改变形状或大小的图像是带有超链接的图像。因此，我从第一张图片中删除了超链接。并决定将其放置在第二张图像上进行测试，现在第一张图像和第三张图像缩小得很好。
但是，第二张图像保持完全相同的大小？然后尝试向所有图像添加超链接，但它们都没有更改以匹配屏幕宽度？
如果弹性项目是图像，如果它们有超链接，我说它们不会弯曲，我说错了吗？当然不可能是这样吧？