如何用纯HTML/JS实现数组元素按每行最多N个动态分配到div中？

要实现每行最多显示3个卡片的效果，只需调整卡片容器的CSS布局，以下是两种简单可行的方案：

方案1：使用Flexbox布局 #

修改#cards容器的样式，通过弹性布局实现自动换行并控制每行元素数量：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
    <br>
    <div style="display: flex;">
        <div id="deck" style="flex: 1;width:500px;height:300px;text-align:center;background-color:green;margin:0 auto;">CARDS</div>
        <div id="discard" style="flex: 0.5 1 30%;width:500px;height:300px;text-align:center;background-color:yellow;margin:0 auto;">DISCARDS</div>
    </div>
    <!-- 修改cards容器样式 -->
    <div id="cards" style="background-color:orange;margin:0 auto;display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;padding: 10px;">XYZ</div>
    <script type="text/javascript">
        let cards = ["xf"];
        addCard("xa");
        function addCard(card){
            cards.push(card);
            document.getElementById('cards').innerHTML = cards.map(c => 
                `<div>
                <div id="${c}" onclick="selectCard(this)" style="width:50px;height:30px;text-align:center;border:1px solid #000;">${c}</div>
                </div>`
            ).join('')
        }
        // 补充选中卡片的示例函数
        function selectCard(el) {
            console.log('选中卡片:', el.id);
        }
    </script>
</body>
</html>

核心CSS说明： #

• display: flex：将容器设置为弹性布局
• flex-wrap: wrap：元素总宽度超出容器时自动换行
• gap: 10px：设置卡片间的间距（可选，优化视觉效果）
• justify-content: center：让每行卡片居中排列

方案2：使用CSS Grid布局 #

Grid布局更适合固定列数的场景，直接指定每行3列：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
    <br>
    <div style="display: flex;">
        <div id="deck" style="flex: 1;width:500px;height:300px;text-align:center;background-color:green;margin:0 auto;">CARDS</div>
        <div id="discard" style="flex: 0.5 1 30%;width:500px;height:300px;text-align:center;background-color:yellow;margin:0 auto;">DISCARDS</div>
    </div>
    <!-- 修改为Grid布局 -->
    <div id="cards" style="background-color:orange;margin:0 auto;display: grid;grid-template-columns: repeat(3, 50px);gap: 10px;justify-content: center;padding: 10px;">XYZ</div>
    <script type="text/javascript">
        let cards = ["xf"];
        addCard("xa");
        function addCard(card){
            cards.push(card);
            document.getElementById('cards').innerHTML = cards.map(c => 
                `<div id="${c}" onclick="selectCard(this)" style="height:30px;text-align:center;border:1px solid #000;">${c}</div>`
            ).join('')
        }
        function selectCard(el) {
            console.log('选中卡片:', el.id);
        }
    </script>
</body>
</html>

核心CSS说明： #

• display: grid：启用网格布局
• grid-template-columns: repeat(3, 50px)：直接指定每行3列，每列宽度与卡片一致
• gap: 10px：设置卡片间的间距
• justify-content: center：让卡片网格在容器中居中

两种方案都能实现你需要的每行最多3个卡片的效果，Grid布局更直观适合固定列数场景，Flexbox则更灵活，可按需选择。

内容的提问来源于stack exchange，提问作者zxcisnoias