Div溢出並向左滾動

我有一個固定高度爲500px的div。包含在div中的是圖像。我已經將它們堆疊起來並以我現在喜歡的方式溢出，而不是當可見div完全填充到底部並向下滾動時，如何強制div在x軸上滾動。這是我目前的HTML和SCSSDiv溢出並向左滾動

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

來源

2013-11-05 rigelstpierre

，因此圖像垂直堆疊和滾動在y軸，但你希望他們左對齊，水平浮動，並在x軸滾動？ –

更新：發錯在撥弄不使用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-05 01:28:28 ippi

-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-05 01:21:03

[SCSS，查找它！]（http://sass-lang.com/）並將overflow-x設置爲auto不會執行任何操作（除非沒有溢出時自動隱藏滾動條） – ippi

抱歉。這沒什麼個人的。我低估了你的答案，因爲你沒有事先測試它，它不起作用。而且我不知道你是不是知道SCSS，或者沒有讀過這個問題。如果你不知道，不要脫口而出。這是無益的。 - 另外，我不是OP（任何人都可以讓你失望）。 – ippi

Div溢出並向左滾動

回答

相關問題