如何在不使用JavaScript的情况下合并div或div内容

如果不想借助JavaScript，咱们完全可以通过调整HTML结构或者用CSS实现类似“合并”的效果，分两种常见场景来说明：

1. 直接合并HTML结构（最彻底的方案） #

这是最简单直接的办法——直接把需要合并的div里的内容转移到同一个div容器中，删掉多余的空容器或者重复容器就行。

比如你提供的代码里有两个<div class="categoria_menu_wrap_down">，原来的结构是：

<div class="categoria_menu_wrap_down"></div>
<!-- 其他中间内容 -->
<div class="categoria_menu_wrap_down">...</div>

你可以改成这样，把两个div的内容整合到同一个容器里：

<div class="categoria_menu_wrap_down">
  <!-- 这里放两个div原来的所有内容 -->
  ...
</div>

这种方式从根源上合并了容器，没有多余的DOM元素，不管是维护性还是对SEO的友好度都是最优的。

2. 用CSS实现视觉上的合并（不修改HTML结构） #

如果因为某些限制不能改动HTML结构，那可以用CSS让多个div看起来像是一个整体：

• 消除容器间的间距与边框冲突：如果div自带margin、padding或者边框，把它们调整成衔接样式，比如给相邻div设置margin: 0，让重叠的边框只保留外侧部分。
• 用布局属性衔接容器：把这些div的父容器设置为flex或grid布局，消除容器间的间隙，让它们视觉上连成一块。比如：

/* 给父容器设置flex布局，纵向排列且无间隙 */
.parent-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 给div设置统一边框，再去掉相邻容器的重叠边框 */
.categoria_menu_wrap_down {
  border: 1px solid #ccc;
  padding: 8px;
}
.categoria_menu_wrap_down:first-child {
  border-bottom: none;
}
.categoria_menu_wrap_down:last-child {
  border-top: none;
}

这种方式只是视觉上让div看起来合并了，但实际DOM结构还是分开的，适合仅需视觉效果的场景。

小提醒 #

如果核心需求是合并内容本身，优先选择调整HTML结构的方式，比CSS模拟更清晰直观，也避免后续DOM操作可能出现的问题；如果只是需要视觉上的整合，再考虑CSS方案。

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