如图所示，客户出了一个很特殊的设计稿。

每一行都下面都会有一条横线。

然后数据又是通过后台来循环输出的。

这样的设计要循环输出单个数据的时候，就有点麻烦。

同时，虽然一行三个，但是第一个居左，第二个居中，第三个居右。

先看HTML生成：

 {hmcms:list num=10 order='sorting asc,id desc'}          
      <div class="caselist wow fadeIn">
        <a href="[list:link]" target="_blank">
            <div class="case-box"><img src="[list:ico]"></div>
            <div class="desc mt-4">
                <div class="title text-center fs-16 fs-sm-18 mb-2 color333">[list:title]</div>
                <div class="subtitle text-center fs-14 fs-sm-16">[list:subtitle]</div>
            </div>
        </a>
      </div>
       {/hmcms:list}

下面是CSS:

 .case-row {
      border-bottom: 2px solid #e6e6e6;   
      padding:20px 0 10px 0;
    }
    .caselist {
    display: inline-block;   /* 改为 inline-block，使其宽度为内容宽度 */
    width: auto;
    text-align: center;
    margin: 50px 0 10px;     /* 你可以调整上下距离 */
    vertical-align: top;     /* 保证多行垂直对齐 */
    }

    .case-box {
     width: 300px;   
    }

    .case-box img {
       width:300px;
       height: 420px;
      object-fit: cover;
      display: block;
    }
    
    @media(max-width: 768px){
        .caselist { 
        display: block; 
        width: 100%; 
        } 
    }

然后加上JS：

<script>
document.addEventListener('DOMContentLoaded', function () {
  const container = document.querySelector('.case-list-box');
  if (!container) return;
  // 保存原始 items（从模板输出的 .caselist）
  const originalItems = Array.from(container.querySelectorAll('.caselist'));

  function rebuild() {
    const w = window.innerWidth;
    // 决定每行几列（与你的断点一致）
    const perRow = (w < 992) ? 2 : 3;

    // 清空容器并重建 rows
    container.innerHTML = '';
    for (let i = 0; i < originalItems.length; i += perRow) {
      const rowItems = originalItems.slice(i, i + perRow);
      const row = document.createElement('div');
      row.className = 'row case-row';

      // 为每个 item 创建 col 并根据位置设置对齐
      rowItems.forEach((item, idx) => {
        const col = document.createElement('div');

        // 基本的列类（在不同屏宽下控制列宽）
        // 注意：col-lg-4 在大屏时每列三等分；col-6 在窄屏时两列
        col.className = 'col-6 col-md-6 col-lg-4 d-flex';

        // 决定该列内部的水平对齐（使 .caselist 在 col 内左/中/右）
        let alignClass = 'justify-content-center'; // 默认居中
        if (perRow === 2) {
          // 两列模式：都居中
          alignClass = 'justify-content-center';
        } else { // perRow === 3
          if (rowItems.length === 3) {
            // 完整三列：第1 start，第2 center，第3 end
            alignClass = (idx === 0) ? 'justify-content-start' :
                         (idx === 1) ? 'justify-content-center' : 'justify-content-end';
          } else if (rowItems.length === 2) {
            // 大屏最后一行只有两个：我们按 [start, center] 布局（通常比两边留白更协调）
            alignClass = (idx === 0) ? 'justify-content-start' : 'justify-content-center';
          } else {
            // 只有一个元素（最后一行仅1个）——左对齐
            alignClass = 'justify-content-start';
          }
        }

        // 把对齐类加上去
        col.className = col.className + ' ' + alignClass;

        // 把原始 item 节点插入（节点会被移动，不会复制）
        col.appendChild(item);
        row.appendChild(col);
      });

      container.appendChild(row);
    } // end for
  } // end rebuild

  // 初次构建 & resize 监听（防抖）
  rebuild();
  let timer = null;
  window.addEventListener('resize', function () {
    clearTimeout(timer);
    timer = setTimeout(rebuild, 120);
  });
});
</script>