使用CSS制作3×8布局的70×37mm贴纸标签遇重叠问题

制作3列8行（单张尺寸70×37mm）的24个相同信息贴纸标签时，内部内容可通过调整尺寸和边距适配标签框，但无法实现3×8的布局——仅给.label-main设置width:70mm、height:37mm后，所有标签元素重叠在一起。现有标签生成代码如下：

const renderLable = () => {
  let labellist = [];
  for (let i = 1; i <= 24; i++) {
        <div className="label-main" key={i}>
            <p className="item_name">{item_name}</p>
            <p className="Check_Date">Tillv:{Check_Date}</p>
              <strong>
                <i className="Batch_number">
                  batch# {Batch_number} 
                </i>
              </strong>
            <div className="row no-gutters">
              <div className="col-8">
                <p className="Expire_Info"> {Expire_Info}</p>
                <p className="prodcution">
                  <p>{type}</p>
                  <p>{address1} </p>
                  <p>{address2}</p>
                  <p> {email} </p>
                  <p className="OBS">{OBS}</p>
                </p>
              </div>
              <div className="col-4">
                <QRCode
                  value={Content}
                  renderas="svg"
                  style={{
                    width: "80px",
                    height: "80px",
                  }}
                />
              </div>
            </div>
          </div>
  }
  return labellist;
}

return (
<div>
 <div className="container">{renderLable()}</div>
</div>
)

问题核心是未给外层容器设置合理的布局规则，导致标签元素无法按预期排列。以下两种方案均可实现3×8的网格布局：

方案1：CSS Grid（推荐） #

通过Grid布局直接定义列数和间距，适配性更强：

.container {
  display: grid;
  grid-template-columns: repeat(3, 70mm); /* 固定3列，每列宽度70mm */
  gap: 5mm; /* 标签间的间距，可根据标签纸实际调整 */
  padding: 5mm; /* 容器内边距，可选 */
}

.label-main {
  width: 70mm;
  height: 37mm;
  box-sizing: border-box; /* 确保内边距/边框不超出设定尺寸 */
  padding: 2mm; /* 内部内容的留白，按需调整 */
  border: 1px solid #ccc; /* 可选：显示边框方便调试 */
}

方案2：CSS Flexbox #

利用Flex的自动换行特性实现布局：

.container {
  display: flex;
  flex-wrap: wrap; /* 超出容器宽度自动换行 */
  gap: 5mm;
  padding: 5mm;
}

.label-main {
  width: 70mm;
  height: 37mm;
  box-sizing: border-box;
  padding: 2mm;
  flex-shrink: 0; /* 禁止标签被压缩变形 */
  border: 1px solid #ccc;
}

额外修正与注意事项 #

1. JSX逻辑修正：原代码中labellist数组未正确添加生成的标签元素，需修改为push方式：

const renderLable = () => {
  const labellist = [];
  for (let i = 1; i <= 24; i++) {
    labellist.push(
      <div className="label-main" key={i}>
        {/* 内部内容保持不变 */}
      </div>
    );
  }
  return labellist;
};

2. HTML结构修正：原代码用<p className="prodcution">嵌套多个<p>属于无效结构，建议改为<div>：

<div className="prodcution">
  <p>{type}</p>
  <p>{address1} </p>
  <p>{address2}</p>
  <p> {email} </p>
  <p className="OBS">{OBS}</p>
</div>

3. 打印适配：若需直接打印标签，可添加打印样式：

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    gap: 0; /* 根据标签纸实际间距调整，可设为0 */
    padding: 0;
  }
  .label-main {
    border: none; /* 打印时隐藏边框 */
  }
}

内容的提问来源于stack exchange，提问作者sassy.M