如何使可变数量的颜色div自动适配总宽度600px？

当然可以实现，用CSS Flexbox就能轻松搞定这个问题，完全不需要硬编码宽度。下面是具体的修改步骤和完整代码：

核心修改点 #

• 将.palette-selector_colors设置为flex容器，让子元素自动分配宽度
• 移除硬编码的width:70px，用flex:1让每个色块平分总宽度
• 清理冲突的样式（比如重复的display、float属性）

修改后的完整代码 #

<html>

<head>
    <style>
        :root {
            --color-gen-1: #680E4A;
            --color-gen-2: #6183D9;
            --color-gen-3: #132A93;
            --color-gen-4: #AF1B6A;
            --color-gen-5: #4ab9ec;
            --color-gen-6: #5A448B;
            --color-gen-7: #e054a1;
            --color-gen-8: #170E63;
        }

        .palette-selector_colors {
            height: 60px;
            width: 100%; /* 继承父容器的600px宽度 */
            background-color: rgb(226, 222, 217);
            overflow: hidden;
            display: flex; /* 关键：设置为flex容器 */
        }

        .palette-selector_colors div {
            height: 100%;
            flex: 1; /* 关键：每个子元素平均分配可用宽度 */
        }

        .palette-container {
            width: 600px;
        }

        .palettecolor1 {
            background-color: var(--color-gen-1);
        }
        .palettecolor2 {
            background-color: var(--color-gen-2);
        }

        .palettecolor3 {
            background-color: var(--color-gen-3);
        }

        .palettecolor4 {
            background-color: var(--color-gen-4);
        }

        .palettecolor5 {
            background-color: var(--color-gen-5);
        }

        .palettecolor6 {
            background-color: var(--color-gen-6);
        }

        .palettecolor7 {
            background-color: var(--color-gen-7);
        }

        .palettecolor8 {
            background-color: var(--color-gen-8);
        }
    </style>
</head>

    <img src="img/cyberpunk.jpg" width="600px"/>

    <br/>
    <br/>
    <div class="palette-container">
        <div class="palette-selector_colors">
            <div class="palettecolor1">&nbsp;</div>
            <div class="palettecolor2">&nbsp;</div>
            <div class="palettecolor3">&nbsp;</div>
            <div class="palettecolor4">&nbsp;</div>
            <div class="palettecolor5">&nbsp;</div>
            <div class="palettecolor6">&nbsp;</div>
            <div class="palettecolor7">&nbsp;</div>
            <div class="palettecolor8">&nbsp;</div>
        </div>
    </div>

</html>

关键逻辑说明 #

• display: flex：将.palette-selector_colors转换为flex容器，内部色块会自动横向排列
• flex: 1：每个色块会平分容器的总宽度（也就是父容器的600px），不管色块数量是3还是10，都会自动计算出合适的宽度值
• 移除了原来的float: left、display: inline-block、width:70px等冲突样式，避免干扰flex布局的自动计算
• .palette-selector_colors的width:100%会继承.palette-container的600px宽度，确保整个颜色网格的总宽度固定

修改后，无论你生成多少个颜色块（3-10个范围内），颜色网格都会刚好占满600px宽度，完全不需要手动设置每个色块的宽度。

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