Question

我有一个固定高度为500px的div。 div中包含的是图像。我已经让它们以我喜欢的方式堆叠和溢出，但是当可见的div完全填充到底部并向下滚动时，我如何强制div在x轴上滚动。这是我目前的HTML和SCSS

<div class="gallery">
    <img src="img/samples/sample-photo-1.jpg" class="wedding" />
    <img src="img/samples/sample-photo-2.jpg" class="portraights" />
    <img src="img/samples/sample-photo-2.jpg" class="family" />
    <img src="img/samples/sample-photo-1.jpg" class="wedding" />
    <img src="img/samples/sample-photo-1.jpg" class="wedding" />
    <img src="img/samples/sample-photo-2.jpg" class="portraights" />
    <img src="img/samples/sample-photo-2.jpg" class="family" />
    <img src="img/samples/sample-photo-2.jpg" class="portraights" />
    <img src="img/samples/sample-photo-2.jpg" class="family" />
</div>

.gallery {
      clear: both;
      margin: 0 0 0 15px;
      max-height: 500px;
      width: 100%;
      overflow-x: scroll;
      display: block;
      img { 
        float: left;
        padding: 3px;
      }
}

Answer 1

更新：在小提琴中不使用scss时犯了一个错误，它揭示了float:left如何从文本流中删除你的图像。

.gallery {
    clear: both;
    margin: 0 0 0 15px;
    max-height: 500px;
    width: 100%;
    overflow-x: scroll;
    display: block;
    white-space: nowrap;
    img { 
        padding: 3px;
    }
}

jsfiddle.

Answer 2

.gallery {
      clear: both;
      margin: 0 0 0 15px;
      max-height: 500px;
      width: 100%;
      overflow-x: scroll;
      display: block;
}

img { 
      float: left;
      padding: 3px;
}

请试试这个

或者这个：

overflow-x: auto;

Div溢出并向左滚动

2 个答案: