CSS -具有两行和无限宽的可滚动水平div？
CSS -具有两行和无限宽的可滚动水平div？
提问于 2016-10-10 12:48:42
我想知道是否有可能做一个无限和水平的div (行)，其中包含这样的图像:滚动x，以幻灯片和看到另一个图像隐藏溢出。
请看这把小提琴：https://jsfiddle.net/nbjx50ge/，我想把这9条第一项放在一行中，但是带有overflow。
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-10 12:51:00
您只需要在行上设置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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39958688
复制相关文章
相似问题
腾讯云开发者
