如何在 div 中并排阻止 3 个图像从换行到下一行？

Question

我无法弄清楚这一点。我想要 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 查询。但必须有一个更简单的方法。一些很简单的东西，我错过了。

Answer 1

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

.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>