求助：如何在Vue3、HTML、CSS中实现1:2层级结构的金字塔

问题背景 #

已通过动态方式生成金字塔，当state.pyramidlevel = 3时呈现3层结构。当前使用的代码如下：

HTML代码 #

<div class="overflow-auto">
   <div id="zoomable" class="">
      <div v-html.domProps="state.pyramid" style="width: max-content; height: 100vh;"></div>
   </div>
</div>

JavaScript代码 #

function createPyramid() {
    const height = state.pyramidlevel;
    let pyramidstr = '';
    // Start with 1 asterisk in the first row
    let numAsterisks = 2;

    for (let row = 0; row < height; row++) {
        let rowStr = '';

        // Add spaces to center the pyramid
        for (let space = 0; space < height - row - 1; space++) {
            rowStr += '';
        }

        // Add div for this row
        for (let star = 0; star < numAsterisks; star++) {
            rowStr += `
            <div 
            style="
                text-align:center;
                margin:3px; 
                width: 150px; 
                height: 30px; 
                border: 1px solid black; 
                background-color: rgb(255, 255, 255);">

                Vacant
            </div>`;
        }

        // Add this row to the pyramid
        pyramidstr += `<div
        
        style="
            display: flex; 
            place-content: center;
        "
        
        >${rowStr}</div>`;

        // Double the number of asterisks for the next row
        numAsterisks *= 2;
    }

    state.pyramid = pyramidstr;
}

需求 #

需要将金字塔调整为1:2层级结构：每个上层砖块恰好位于下层两个砖块的中间位置。例如state.pyramidlevel = 2时，结构如下：

.____.
     |____|
.____.    .____.
|____|    |____|

解决方案 #

核心是通过行级左侧偏移实现上层砖块的居中对齐，具体修改如下：

修改后的JavaScript代码 #

function createPyramid() {
    const height = state.pyramidlevel;
    const brickWidth = 150;       // 砖块固定宽度
    const brickMargin = 3;        // 砖块单边margin
    const brickTotal = brickWidth + brickMargin * 2; // 单块砖块总占用宽度（含左右margin）
    let pyramidstr = '';
    let numAsterisks = 1;         // 最上层从1块开始，符合1:2层级逻辑

    for (let row = 0; row < height; row++) {
        let rowStr = '';
        // 计算当前行的左侧偏移量：仅非底层行需要偏移，公式确保上层砖块对齐下层两砖中间
        const offset = row === height - 1 
            ? 0 
            : (brickTotal / 2) * (Math.pow(2, height - row - 1) - 1);

        // 生成当前行的砖块
        for (let star = 0; star < numAsterisks; star++) {
            rowStr += `
            <div 
            style="
                text-align:center;
                margin: ${brickMargin}px; 
                width: ${brickWidth}px; 
                height: 30px; 
                border: 1px solid black; 
                background-color: #fff;">

                Vacant
            </div>`;
        }

        // 生成当前行容器，添加偏移量
        pyramidstr += `<div
        style="
            display: flex; 
            padding-left: ${offset}px;
        "
        >${rowStr}</div>`;

        // 下一行砖块数量翻倍
        numAsterisks *= 2;
    }

    state.pyramid = pyramidstr;
}

关键修改点 #

1. 修正初始砖块数量：将numAsterisks初始值改为1，匹配1:2层级的最上层1块、下层依次翻倍的结构。
2. 动态计算偏移量：通过公式(brickTotal / 2) * (2^(height - row - 1) - 1)计算每行的padding-left，确保上层砖块精准落在下层两个砖块的中间位置。
3. 样式常量提取：把砖块宽度、margin提取为常量，方便后续统一调整样式。

效果验证 #

当state.pyramidlevel = 2时：

• 上层（第0行）偏移量为78px（(156/2)*(2^(2-0-1)-1)），刚好让单块砖块居中于下层两块砖块的中间，完全符合需求示例结构。

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