CSS - 兩行無限寬度的可滾動水平div？

Question

我想知道是否有可能做一個無限的水平格（行）含有相似圖片： 並滾動X滑動，看到溢出隱藏在其它圖像..

看到這個小提琴： https://jsfiddle.net/nbjx50ge/ 我想有一個單列但與9第一項溢出-X

<div id="container"> 
    <div id="row-1"> 
        <img id="emoji-glace" src="img/emoji/Glace.png"> 
        <img id="emoji-cafe" src="img/emoji/Cafe.png"> 
        <img id="emoji-biere" src="img/emoji/Biere.png"> 
        <img id="emoji-repas" src="img/emoji/Repas.png"> 
        <img id="emoji-sushi" src="img/emoji/Sushi.png"> 
        <img id="emoji-pizza" src="img/emoji/Pizza.png"> 
        <img id="emoji-repas" src="img/emoji/Repas.png"> 
        <img id="emoji-sushi" src="img/emoji/Sushi.png"> 
        <img id="emoji-pizza" src="img/emoji/Pizza.png"> 
      </div> 
      <div id="row-2"> 
        <img id="emoji-glace" src="img/emoji/Glace.png"> 
        <img id="emoji-cafe" src="img/emoji/Cafe.png"> 
        <img id="emoji-biere" src="img/emoji/Biere.png"> 
        <img id="emoji-repas" src="img/emoji/Repas.png"> 
        <img id="emoji-sushi" src="img/emoji/Sushi.png"> 
        <img id="emoji-pizza" src="img/emoji/Pizza.png"> 
        <img id="emoji-repas" src="img/emoji/Repas.png"> 
        <img id="emoji-sushi" src="img/emoji/Sushi.png"> 
        <img id="emoji-pizza" src="img/emoji/Pizza.png"> 
      </div> 
</div> 

Answer 1

你只需要設置white-space: nowrap行上。

#container { 
 
    width: 30%; 
 
    overflow-x: auto; 
 
} 
 
#container > div { 
 
    white-space: nowrap; 
 
} 
 
#emoji { 
 
    width: 30px; 
 
}

<div id="container"> 
 
    <div id="row-1"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    </div> 
 
    <div id="row-2"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    <img id="emoji" src="http://i.dailymail.co.uk/i/pix/2015/05/06/12/28600CB500000578-3070135-image-a-30_1430912161865.jpg"> 
 
    </div> 
 
</div>