css - 强制 div 容器中的图像溢出而不是转到下一行

Question

我有一个带有 overflow: auto 和最大高度和宽度的容器。容器中是图像。为了移除边距，我将它们全部放在一行中以移除水平边距，并向它们添加 float: left 以移除垂直边距。

问题是，即使所有图像都在一行中，一旦没有空间放置另一个图像时，图像不会溢出并添加水平滚动条，而是会出现在下一行。如果行太多，则会出现垂直滚动条。

我如何强制图像保持在一行上并且只转到我指定的下一个图像？

Answer 1

你应该将你的图像放在另一个 div 中并将空白属性指定为“nowrap”

<div id="ImageContainer" style="height:300px; white-space: nowrap;">
    <!--  I only adjusted the img sizes to fit this example.
      -->
      <img src="https://static.pexels.com/photos/700447/pexels-photo-700447.jpeg" alt="Num1" height="300" width="300">
      <img src="https://static.pexels.com/photos/700448/pexels-photo-700448.jpeg" alt="Num2" height="300" width="300">
      <img src="https://static.pexels.com/photos/700450/pexels-photo-700450.jpeg" alt="Num3" height="300" width="400">
      <img src="https://static.pexels.com/photos/700420/pexels-photo-700420.jpeg" alt="Num4" height="300" width="500">

    </div>

`