使用CSS将图像加载到水平而不是垂直

Question

我将图像放在屏幕上（只是小圆圈），每次按下按钮10都会弹出。这就是发生的事情：

它在前一个之下。

这就是我想要发生的事情：

我的CSS到目前为止：

.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;
}

HTML：

<div class="userNumbers">
 <div class="numbers">
  <div class="num"> <p> 1 </p><img src="pic.png"></div>
  <!--to 10-->
 </div>
</div>

如何使用CSS，我可以将它更改为彼此相邻吗？图像位于带有类的div内。 :)

基本上每次调用div'数字'时我想在它左边添加32px ..不要在它之下。我用JavaScript btw调用它，但这是无关的。

Answer 1

我将10个第一张图片放在带有属性的div中：

display: inline-block;

然后只用图像复制div，它应该没问题。

例如，

<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

我会选择显示flex的这种方法来动态添加新列。请注意，如果您希望每列显示10张图片，<p>高度应为#imgContainer的1/10。例如，如果要在每列中显示20个图像，请将父高度设置为1000px或将<p>高度设置为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>