1

我有一个固定高度为 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;
      }
}
4

2 回答 2

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。

于 2013-11-05T01:28:28.030 回答
-1 
.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;
于 2013-11-05T01:21:03.740 回答