如何实现将多个不同div内容统一展示在同一个弹窗中

你现在出现分离卡片的核心原因是样式层级写错了：你把弹窗的白色背景、边框、圆角、内边距都加在了循环生成的每一个分期项div上，导致每一条分期数据都被渲染成了独立的小卡片，自然没法形成统一的弹窗效果。

目标统一弹窗效果

当前分离卡片效果

JSX部分 #

结构不需要大改，把循环项的类名调整下避免和容器样式混淆，同时补上循环渲染要求的key属性：

<div className="installmentinfo__container">
  {
    props.installmentList?.map((e, i) => {
      return (
        <div className="installmentinfo__row" key={i}>
          <div className="installmentnumber">{i + 1}</div>
          <div className="installmentdate">{e.date}</div>
          <div className="installmentamount">{e.amount} {e.currency}</div>
        </div>
      );
    })
  }
</div>

提示：如果分期数据有唯一id，建议把key换成对应id，不要长期用索引当key避免渲染异常。

CSS部分 #

把弹窗外壳的统一样式全部移到外层容器上，内层的每一行只保留布局和分隔线样式，最后一行去掉底部分割线更贴合设计：

.installmentinfo__container {
  position: absolute;
  right: 340px;
  width: 280px;
  background: #fff;
  border: var(--border);
  border-radius: 0.5em;
  padding: 0.5em 1em;
  box-sizing: border-box;
}

.installmentinfo__row {
  display: flex;
  align-items: center;
  margin: 0 5px;
  padding: 8px 0;
  justify-content: space-between;
  font-size: 1.3rem;
  border-bottom: 1.5px solid #d1d1d1;
}

.installmentinfo__row:last-child {
  border-bottom: none;
}

.installmentnumber {
  width: 10%;
}

.installmentdate {
  width: 50%;
  color: #000 !important;
}

.installmentamount {
  width: 40%;
  text-align: right;
  color: #000 !important;
  font-weight: 700;
}

改完之后外层容器就是完整的统一弹窗外壳，所有分期行都在同一个弹窗内部，和目标效果一致。如果需要弹窗带指向触发按钮的小三角，给.installmentinfo__container加个::after伪元素画三角形定位到对应边缘即可。

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