jQuery .width（）在页面加载时关闭

Question

我在很多场合遇到过这个问题，需要找到解决办法，因为这会让我感到各种各样的悲伤。此问题包括HTML，CSS和JavaScript。

基本上，我从一个空的div .enrolledPlayers开始。我想添加一个#player的.player div。我抓住了.enrolledPlayers / 10的宽度，我使用这个确定的大小作为.player div的宽度和高度。

这应该会让我连续10次，然后再换10次等等......

我遇到的问题是.player的div太大了，因为这个原因太早了。我正在添加下面问题的图片。奇怪的是，当我点击“切换设备工具栏”两次时，Chrome会修复图片中所示的大小调整。这是他们的理由吗？还是修复？谢谢。

$(document).ready(function() {
    let divWidth = $('.enrolledPlayers').width() / 10;

    for(var i = 0; i < amount; i++) {
        $('.enrolledPlayers').append('<div class="player" style="width: '+ divWidth +'px; height: '+ divWidth +'px; background: '+ getRandomColor() +';"></div>');
    }
});

这是在我点击“切换设备工具栏”之前，显示包装的问题。

这是在我点击“切换设备工具栏”之后，这个节目是如何看的。

Answer 1

所有排序，没有必要专注于动态计算宽度，而是我使用弹性框并使用我提供的最小宽度和最小高度而不是宽度和高度的javascript。这个方法也很敏感，谢谢。

.enrolledPlayers > .player {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex: 1;
}