如何让百分比宽度的textarea每行均匀分布并保持等间距？

阿华AIGC实验室

2026-5-14

实现任意百分比宽度的textarea组：每行铺满+均匀边距

看起来你想要的是让不同宽度比例的textarea组，既能保持指定的宽度占比，又能自动铺满每行，同时元素间的边距完全一致——直接给width加margin的问题在于，元素的总宽度（width+margin）会超出容器，导致换行不符合预期。下面给你两个实用的解决方案：

方案1：Flexbox + 动态宽度计算（适配任意百分比）

这个方案的核心是用calc()来计算textarea的实际宽度，把边距的影响提前扣除，确保每行元素加边距刚好填满容器。

代码示例：

/* 通用容器样式：开启自动换行 */
.textarea-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px; /* 抵消内部元素的左右margin，避免容器左右留白 */
}

/* 通用textarea样式：盒模型设置为border-box，避免padding/border影响宽度 */
.textarea-group textarea {
  box-sizing: border-box;
  margin: 4px; /* 上下左右边距，统一控制间距 */
  padding: 8px; /* 可选：textarea内部内边距 */
}

/* group1：指定宽度为30%（不含边距） */
#group1 textarea {
  /* 计算逻辑：总宽度30%，减去左右margin的总和（4px*2） */
  width: calc(30% - 8px);
}

/* group2：指定宽度为25%（不含边距） */
#group2 textarea {
  width: calc(25% - 8px);
}

对应的HTML结构：

<div id="group1" class="textarea-group">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</div>

<div id="group2" class="textarea-group">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</div>

说明：

容器的margin: 0 -4px是为了抵消textarea的左右margin，保证容器最左侧和最右侧的textarea贴边，不会有额外留白。
calc()里的数值要和margin对应：如果margin是4px，那么左右margin总和是8px，所以要从指定宽度里减去这个值。
这种方式完全支持任意百分比宽度，只要调整calc()里的百分比数值即可。

方案2：Grid布局（更简洁，适合固定列数场景）

如果你的百分比宽度刚好对应固定列数（比如30%对应3列、25%对应4列），用Grid布局会更省心，直接指定列数和间距：

代码示例：

/* group1：3列布局，间距8px */
#group1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* group2：4列布局，间距8px */
#group2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* 通用textarea样式 */
#group1 textarea, #group2 textarea {
  box-sizing: border-box;
  padding: 8px;
}