Question

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

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

如何强制图像保留在一行上，只能转到我指定的下一个图像？

Answer 1

你应该将你的图像放在另一个div中，并将白色空间属性指定为＆＃34; nowrap＆＃34;

＆＃13;

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

＆＃13;

`

Answer 2

我最近也遇到过这个;我相信您需要在CSS中定义这些属性/属性对，以实现内容的横向滚动溢出。这是使用文本的示例，希望它有所帮助：

.item-class {    
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0, 10px, 0, 10px;
}

<div class="item-class">
  <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>

编辑使用示例图片显示它也适用于div中包含的图片

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

2 个答案: