React JS 在组件周围浮动标签，位置绝对是一个谨慎的想法吗？

Question

我想参与一些可能比较复杂的事情。我想用 React JS 创建以下渲染（见下图）。但是，我认为从使用 position: absolute 开始并相应地重新定位我的 div 是明智的。然而，乍一看这似乎是一个困难的想法，考虑到我想要的标签数量（浮动在主要组件周围）用于响应方面以及使用一些像素移动它们将是一项无限期的任务。因此，我想知道是否有插件，或者您是否有解决这个特定方面的建议。此外，请记住，如果您想回应，可以使用基本的彩色正方形来回应；我期待着学习如何应用这样的东西而不是具体的设计。

今天，我有以下内容，但要对每个都执行此操作是难以管理的，希望在响应式调整大小时取得最佳效果。

我当前的代码：

React JS div:

profile_picture = () => {
return (
  <div className="profilepicturetechstack">
    <div className="home">
      <div className="frame-1-3">
        <img src="./resources/simon-provost-02-min.jpg"  alt="profile_pic"/>
      </div>
      <div className="photo--wrapper--ellipse">
        <p className="text-4">ML/RESEARCH</p>
      </div>
      <p className="text-1">Simon provost</p>
      <p className="text-2">Paris, France</p>
    </div>
    <div className="frame-1-4">
      <p className="text-7">⚙️ Machine Learning</p>
    </div>
    {/*<div className="frame-1-9">
      <p className="text-8"> AutoML</p>
    </div>
    <div className="frame-1-5">
      <p className="text-9">⛏ Data Mining</p>
    </div>
    <div className="frame-1-6">
      <p className="text-1-0">  UI.UX</p>
    </div>
    <div className="frame-1-8">
      <p className="text-1-1"> Research</p>
    </div>
    <div className="frame-1-2">
      <img src="" />
    </div>
    <div className="frame-1-7">
      <p className="text-1-3">  MLOps</p>
    </div>*/}
  </div>
)

}

CSS 关联 class:

.profilepicturetechstack {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-right: 10%;
}
.home {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 100px;

  border-radius: 13px;
  height: 300px;
  width: 350px;
  background-color: #ffffff;
  box-shadow: 0 40px 30px rgba(25, 25, 46, 0.06);
}
.text-1 {
  text-align: center;
  vertical-align: top;
  font-size: 16px;
  font-family: Roboto, serif;

  color: #25323c;
}
.text-2 {
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  margin-top: -15px;
  font-family: Roboto, serif;

  color: #859fb3;
}
.photo--wrapper--ellipse {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -15px;
  width: 96px;
  height: 25px;

  background: linear-gradient(135deg, #FF26B2 0%, #851BD9 80%, #3F0FFF 100%);
  opacity: 0.8;
  box-shadow: 0 5px 20px rgba(250, 118, 96, 0.2);
  border-radius: 66px;
}
.img-3 {
  height: 84px;
  width: 84px;
}
.component-/points-/-m {
  opacity: 0.80;
  border-radius: 66px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 10px;
  gap: 7px;
  background-color: red;
}
.text-4 {
  text-align: center;
  vertical-align: top;
  font-size: 11px;
  font-family: Roboto, serif;

  color: #ffffff;
}
.frame-1-3 {
  height: 120px;
  width: 120px;
}

.frame-1-3 img {
  object-fit: contain;
  border-radius: 62px;
  height: 100%;
  width: 100%;
}

.frame-1-1 {
  border-radius: 25px;
  height: 61px;
  width: 61px;
  background-color: rgba(36, 150, 237, 0.5);
}
.img-6 {
  height: 35px;
  width: 37px;
}
.frame-1-4 {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  right: 5%;
  box-shadow: 0 40px 30px rgba(25, 25, 46, 0.04);
  border-radius: 16px;
  background-color: #ffffff;
}
.text-7 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-9 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-8 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-5 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-9 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-6 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-0 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-8 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-1 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}
.frame-1-2 {
  border-radius: 25px;
  height: 61px;
  width: 61px;
  background-color: #f3eefa;
}
.img-1-2 {
  height: 29px;
  width: 29px;
}
.frame-1-7 {
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  background-color: #ffffff;
}
.text-1-3 {
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-family: 'Poppins', serif;
  letter-spacing: 3px;

  color: #5d86a7;
}

我愿意了解更多有关技巧和最佳实践的信息；您可以删除我的代码并再次提供一个专注于目的而不是特定设计的解决方案；那也行。我有点糊涂了。非常感谢。

我希望能够重现的 Figma 截图：

Answer 1

正如 Ramesh 在评论中提到的那样，绝对定位 主要 div.

周围的列表项需要

围绕列表项创建一个容器div，并使其宽度和高度尺寸与className home 相同。这将确保列表项不会受到 flexbox 的影响。

我会删除列表项的类名中的所有弹性容器。相反，使用 position: absolute 以便使用 right、left、bottom 和 top 属性 。从这里，您可以使用百分比或像素测试不同的值以获得您想要的展示位置。有关使用像素或百分比的更多信息，本文有助于阐明这一点：https://www.hongkiat.com/blog/css-units/

至于响应式调整大小：使用媒体查询。使用 !important 属性也很重要，因为它会根据屏幕尺寸为所需的适当值赋予更多权重。有关媒体查询的更多信息，请访问 https://css-tricks.com/a-complete-guide-to-css-media-queries/

用于响应式调整大小的列表项之一应如下所示：

.frame-1-6 { position: absolute; padding: 16px 24px; left: -200px; //Over 900px bottom: 115%; //Over 900px border: 1px solid black; width: 200px; box-shadow: 0 40px 30px rgba(25, 25, 46, 0.04); border-radius: 16px; background-color: #ffffff; } @media screen and (max-width: 900px) { .frame-1-6 { left: -150px !important; //Under 900px bottom: 100% !important; //Under 900px } }

在实际示例中，我已将您的一些列表项放置在所需区域以展示其工作原理。

实例： https://jsfiddle.net/t3qry2oa/286/

React JS 在组件周围浮动标签，位置绝对是一个谨慎的想法吗？

React JS floated tag around a component, is position absolute a prudent idea?

html

css

responsive-design

reactjs

figma