html - CSS - 具有两行和无限宽度的可滚动水平 div？

Question

我想知道是否可以做一个包含这样的图像的无限和水平 div(行):并滚动 x 以滑动并查看溢出隐藏的其他图像..

请看这个 fiddle :https://jsfiddle.net/nbjx50ge/我想将前 9 个元素放在一行中，但要使用 overflow-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>