Question

我想知道是否可以执行包含如下图像的无限水平div（行）：滚动x滑动并查看溢出隐藏的其他图像。

看到这个小提琴：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>

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

1 个答案: