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

更新: fiddle で 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 に答える