如何实现相邻DIV带顶部焊接按钮且边框作兄弟分隔的布局效果？

嘿，这个需求我刚好做过类似的，给你一套完整的实现方案，完全贴合你的要求：

我们需要通过「结构分层 + CSS定位 + 边框精细化控制」来实现三个核心点：卡片并排、标签“焊接”效果、用卡片自身边框做分隔。

1. HTML结构 #

先把每个带标签的卡片拆成容器、标签、内容区三层结构，方便后续定位控制：

<div class="card-group">
  <div class="card-item">
    <span class="card-label">标签1</span>
    <div class="card-body">
      这里是卡片1的内容区域
    </div>
  </div>
  <div class="card-item">
    <span class="card-label">标签2</span>
    <div class="card-body">
      这里是卡片2的内容区域
    </div>
  </div>
  <div class="card-item">
    <span class="card-label">标签3</span>
    <div class="card-body">
      这里是卡片3的内容区域
    </div>
  </div>
</div>

2. CSS核心实现 #

第一步：让卡片并排，用边框做分隔 #

• 外层用flex布局让卡片紧密排列，不要加gap，确保相邻卡片的边框能直接衔接
• 给内容区统一加边框，但去掉右侧边框，最后一个卡片的内容区再补上右侧边框，这样相邻卡片之间只会显示一条分隔线（刚好是卡片自身的边框）

.card-group {
  display: flex;
  align-items: flex-start; /* 保证卡片顶部对齐 */
}

.card-body {
  border: 1px solid #888;
  border-right: none; /* 移除右侧边框，避免和下一个卡片的左边框重叠变粗 */
  border-radius: 4px;
  padding: 20px 15px 15px; /* 顶部预留空间给标签 */
  width: 200px;
  min-height: 150px;
}

/* 给最后一个卡片补上右侧边框，保证整体完整性 */
.card-item:last-child .card-body {
  border-right: 1px solid #888;
}

第二步：实现标签“焊接”效果 #

通过相对定位+绝对定位，让标签覆盖在内容区的顶部边框上，配合背景色把边框盖住，视觉上就像“焊”在上面：

.card-item {
  position: relative; /* 作为标签的定位父容器 */
}

.card-label {
  position: absolute;
  top: -9px; /* 向上偏移，刚好覆盖内容区的顶部边框 */
  left: 15px;
  background: #ffffff; /* 用背景色覆盖下面的边框 */
  padding: 0 8px;
  font-size: 14px;
  color: #333;
}

自定义调整建议 #

• 你可以修改border的样式（比如改成dashed虚线）、颜色来匹配你的设计
• 调整card-body的width、min-height来改变卡片大小
• 标签的样式（字体、背景色、偏移量）也可以根据需求修改，比如把背景色改成和页面主题一致的颜色

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