javascript - jQuery .width() 在页面加载时关闭

Question

我在很多场合都遇到过这个问题，需要找到解决办法，因为它让我很伤心。这个问题包括 HTML、CSS 和 JavaScript。

基本上，我从一个空的 div .enrolledPlayers 开始。我想添加 # 数量的 .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

所有排序，没有必要专注于动态计算宽度，而是我使用 flex box 并使用我提供的 javascript 最小宽度和最小高度而不是宽度和高度。这种方法也是响应式的，谢谢。

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