React中map渲染API数据元素重叠，如何设置间距？

问题 #

用React的map渲染API返回的4条数据时，所有元素相互重叠，需要给元素设置间距。

原React组件代码 #

function Feed(props) {
    console.table(props.data);
    return (
      <>
        {
          props.data.map(item=> (
          <div>
          <div className="taskcolorback-div" />
          <button className="taskcolor-button" />
          <b className="tasktext-b">{item.ActivityType}</b>
          <button className="taskwhite-button" />
          <b className="b">5Hr</b>
          <img className="vector-icon" alt="" src="icons8-chevron-right-64.png" />
          </div>
          )) 
        }
  
      </>
    )
  }

原CSS代码 #

.taskcolor-button,
  .taskcolorback-div {
    position: absolute;
    top: 151px;
    left: 464px;
    border-radius: 22.5px;
    background-color: #d2d3f8;
    width: 351.62px;
    height: 61px;
  }
  .taskcolor-button {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: #5051f9;
    width: 178.24px;
  }
  .tasktext-b {
    position: absolute;
    top: 171px;
    left: 506px;
    font-size: 13px;
    display: inline-block;
    color: #f5f5f5;
    width: 101px;
    height: 23px;
  }
  .taskwhite-button {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: #fff;
    position: absolute;
    top: 161.84px;
    left: 687.61px;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(80, 81, 249, 0.16);
    width: 79.4px;
    height: 37.96px;
  }
  .b,
  .vector-icon {
    position: absolute;
  }
  .b {
    top: 171.33px;
    left: 705.44px;
    font-size: 15px;
    display: inline-block;
    color: #000;
    width: 42.13px;
    height: 21.69px;
  }
  .vector-icon {
    height: 2%;
    width: 0.90%;
    top: 15.8%;
    right: 58.26%;
    bottom: 82.44%;
    left: 41.21%;
    max-width: 100%;
    max-height: 100%;

问题根源 #

1. 所有内部元素使用position: absolute但未指定相对定位的父容器，导致所有元素都相对于整个文档定位，自然重叠。
2. map生成的每个条目之间没有设置间距。

解决方案 #

方案一：修正绝对定位布局 #

给每个map生成的条目容器添加相对定位和间距，同时调整内部元素的定位值：

修改后的React代码

function Feed(props) {
  console.table(props.data);
  return (
    <>
      {props.data.map((item, index) => (
        {/* 添加key和自定义类名，key是React列表渲染必需的 */}
        <div key={index} className="task-item">
          <div className="taskcolorback-div" />
          <button className="taskcolor-button" />
          <b className="tasktext-b">{item.ActivityType}</b>
          <button className="taskwhite-button" />
          <b className="b">5Hr</b>
          <img className="vector-icon" alt="" src="icons8-chevron-right-64.png" />
        </div>
      ))}
    </>
  )
}

修改后的CSS代码

/* 每个任务条目的容器，设置相对定位和底部间距 */
.task-item {
  position: relative;
  margin-bottom: 25px;
  width: 800px;
  height: 80px;
}

.taskcolor-button,
.taskcolorback-div {
  position: absolute;
  /* 改为相对于父容器的定位值 */
  top: 10px;
  left: 20px;
  border-radius: 22.5px;
  background-color: #d2d3f8;
  width: 351.62px;
  height: 61px;
}
.taskcolor-button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: #5051f9;
  width: 178.24px;
}
.tasktext-b {
  position: absolute;
  top: 30px;
  left: 60px;
  font-size: 13px;
  display: inline-block;
  color: #f5f5f5;
  width: 101px;
  height: 23px;
}
.taskwhite-button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: #fff;
  position: absolute;
  top: 20px;
  left: 300px;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(80, 81, 249, 0.16);
  width: 79.4px;
  height: 37.96px;
}
.b,
.vector-icon {
  position: absolute;
}
.b {
  top: 30px;
  left: 320px;
  font-size: 15px;
  display: inline-block;
  color: #000;
  width: 42.13px;
  height: 21.69px;
}
.vector-icon {
  height: 20px;
  width: 20px;
  top: 30px;
  left: 400px;
  max-width: 100%;
  max-height: 100%;
}

方案二：改用Flexbox布局（推荐） #

Flexbox更适合这种横向排列的场景，无需绝对定位，布局更灵活：

修改后的CSS代码

/* 用Flexbox排列内部元素，设置条目间距和内部元素间距 */
.task-item {
  display: flex;
  align-items: center;
  gap: 15px; /* 内部元素之间的间距 */
  margin-bottom: 25px; /* 条目之间的垂直间距 */
  padding: 15px 20px;
  background-color: #d2d3f8;
  border-radius: 22.5px;
}

.taskcolor-button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: #5051f9;
  width: 178.24px;
  height: 61px;
  border-radius: 22.5px;
}

.tasktext-b {
  font-size: 13px;
  color: #f5f5f5;
}

.taskwhite-button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(80, 81, 249, 0.16);
  width: 79.4px;
  height: 37.96px;
}

.b {
  font-size: 15px;
  color: #000;
}

.vector-icon {
  height: 20px;
  width: 20px;
}

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