load images to go horizontally not vertically using CSS - html

Question

im putting images on the screen (just little circles) and every time I press a button 10 more pop up. This is what is happening:
It goes underneath the previous one.
This is what I want to happen:
my CSS thus far:
.numbers {
position: relative;
margin-top: 20px;
padding: 0;
}
.num p {
color: #877000;
position: absolute;
margin: 0 auto;
font-size: 16.5px;
margin-top: 5px;
margin-right: 6px;
margin-left: 6px;
float: left;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
}
.numbers num img {
position: relative;
}
.userNumbers {
position: relative;
}
the HTML:
<div class="userNumbers">
<div class="numbers">
<div class="num"> <p> 1 </p><img src="pic.png"></div>
<!--to 10-->
</div>
</div>
How, using CSS, can I change it to go next to each other? The images are inside a div with a class. :)
basically every time the div 'numbers' is called I want to add 32px the the left of it.. not go under it. Im calling it with JavaScript btw, but that is unrelated.

Answer 1

I'd put the 10 first images inside a div with a property:
display: inline-block;
Then just duplicate the div with the images and it should fine.
For example,
<div style="display: inline-block;">
<img id="img1" />
...
<img id="img10" />
</div>
<div style="display: inline-block;">
<img id="img11" />
...
<img id="img20" />
</div>

Answer 2

I would choose this kind of approach with display flex to dinamically add new columns. Remember that <p> height should be 1/10 of #imgContainer if you want to show 10 images per column. For instance, if you want to show 20 images per column, set parent height to 1000px or <p> height to 25px
#imgContainer {
max-height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
#imgContainer p {
position: relative;
margin: 0;
width: 50px;
height: 50px;
}
#imgContainer img {
width: 100%;
height: 100%;
}
#imgContainer span {
color: #877000;
line-height: 50px;
font-size: 16.5px;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
<div id="imgContainer">
<p><img src="http://goo.gl/L72CdX"><span>1</span></p>
<p><img src="http://goo.gl/L72CdX"><span>2</span></p>
<p><img src="http://goo.gl/L72CdX"><span>3</span></p>
<p><img src="http://goo.gl/L72CdX"><span>4</span></p>
<p><img src="http://goo.gl/L72CdX"><span>5</span></p>
<p><img src="http://goo.gl/L72CdX"><span>6</span></p>
<p><img src="http://goo.gl/L72CdX"><span>7</span></p>
<p><img src="http://goo.gl/L72CdX"><span>8</span></p>
<p><img src="http://goo.gl/L72CdX"><span>9</span></p>
<p><img src="http://goo.gl/L72CdX"><span>10</span></p>
<p><img src="http://goo.gl/L72CdX"><span>11</span></p>
<p><img src="http://goo.gl/L72CdX"><span>12</span></p>
<p><img src="http://goo.gl/L72CdX"><span>13</span></p>
</div>