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

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

Answer 2

使用document.getElementById("containerSlave").style.width = s + "px";，s是新的大小（以像素为单位）（整数）。您需要在CSS中添加width属性。

#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;
    width: <!-- yourwidth --> px
}

注意：将<div class="containerSlave">更改为<div id="containerSlave">