如何阻止 div 内并排的 3 个图像换行到下一行？

我无法弄清楚这一点。我希望 3 个图像并排放置在 930px 宽的 div 中。

因此，当您进入响应式设计模式，或横向拖动屏幕浏览器以使其变小时，所有 3 个图像将并排保留在 div 内，而不会换行到下一行。

但会自动开始调整大小以适应调整大小的 div。

仅当第三个图像包裹在第二个图像下方时，这 3 个图像才开始在 div 内正确调整大小。所以看起来像下面这样。

[]
[] 
[]

一旦所有图像都垂直对齐，图像就会开始正确缩小。但是这个图像包裹在下一个图像下对我来说没有好处，因为当在手机上查看网站时，或者当重新调整屏幕大小时，图像仍然很大。

必须有一种方法可以阻止这些图像相互缠绕，并且保持内联但自动调整自身大小 当 div/页面宽度缩小时？

我尝试过空白：nowrap;显示方式：内嵌；内联块；均匀显示：table-cell；似乎什么也没有 做我需要它做的事情。但是，如果我只使用一张图像而不是 2 个或 3 个图像，那么它就可以正常工作。

您可能在想为什么不在 Photoshop 中将所有 3 张图像放入 1 张图像中呢？那么每个 img 都是一个 href 链接，所以这是不可能的。 即使将图像全部浮动到左侧仍然没有帮助。

这是我的 CSS/HTML

img {

max-width: 100%;
height: auto;

}

then

<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 查询。但一定有一种更简单的方法。一些如此简单的事情我错过了。

我想我也可以分享一个弹性盒解决方案。我已经包含了下面的代码，所以它应该是相对不言自明的。如果您认为我需要澄清任何内容，请随时在下面发表评论。

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}

<div class="container" style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://cdn.vox-cdn.com/uploads/chorus_image/image/44336734/fujifilmx100t-1.0.0.jpg"> 
<img src="https://d3k7s9wfq6lao0.cloudfront.net/latest/37504/main/7.jpg"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Clapperboard%2C_O2_film%2C_September_2008.jpg">
</div>