#html #css
#HTML #css
Вопрос:
Я хотел бы знать, возможно ли создать бесконечный и горизонтальный div (строка), содержащий изображения, подобные этому: И прокрутите 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>
Ответ №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>