html - 如何在球数增加时增加框架的宽度

Question

here is my code

.containerSlave {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    height: 220px;
    /*item height x 10*/
    border: 2px solid red;
}

.containerSlave .ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 1px #000;
    font-size: 15px;
    color: #ffffff;
    margin: 2px 2px 2px 2px;
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000);
}

当小球处于限高状态自动改变纵向时，如何使小球覆盖在框内。随着球数的增加，框架的宽度会增加。

Answer 1

好的，我正在使用 Mozilla，这似乎有效。这是您的原始代码，但我将 containerSlave 中的固定宽度设置为 75px。

这会起作用并且看起来不错，但老实说，您将需要使用外部代码，如 JS (javascript)。如果您对此持开放态度，我可以向您展示一个很酷的技巧来解决它。

.containerSlave {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    height: 220px;

    **width:75px;**

    /*item height x 10*/
    border: 2px solid red;
}

.containerSlave .ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 1px #000;
    font-size: 15px;
    color: #ffffff;
    margin: 2px 2px 2px 2px;
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000);
}