在组件周围反应JS浮动标签，位置绝对是一个谨慎的想法吗？
在组件周围反应JS浮动标签，位置绝对是一个谨慎的想法吗？
提问于 2021-12-15 14:53:39
我想参与一些可能很复杂的事情。我想用React创建以下呈现(见下图)。然而，我认为谨慎的做法是首先使用position: absolute并相应地重新定位div。然而，乍一看，这似乎是一个困难的想法，考虑到我想要的标记数量(在主组件周围浮动)对于响应方面来说，以及使用某个像素移动它们将是一项无限期的任务。因此，我想知道是否有插件，或者您是否有任何解决这个特定方面的建议。另外，请记住，如果你喜欢回应，它是可以这样做使用基本的彩色矩形；我期待着学习如何应用这样的东西，而不是具体的设计。
今天，我有以下几点，但这将是无法管理的，为每一个，并希望最好的在响应调整。
我现在的代码是：
对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关联类：
.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;
}我愿意学习更多关于技巧和最佳实践的知识；您可以删除我的代码，并提供一种解决方案，将重点放在目标上，而不是再次强调特定的设计；这很好。我有点糊涂了。非常感谢。
图中的截图我希望能够复制：
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-15 21:29:59
正如注释中提到的，围绕主div的列表项需要绝对定位。
- 在列表项周围创建一个容器div，其宽度和高度维度与className home相同。这将确保列表项目不会受到柔性盒的影响。
- 我将删除列表项的classNames中的所有flex容器。相反，要使用(右、左、下和顶属性)，请使用“位置:绝对”。从这里开始，您可以使用百分比或像素来测试不同的值，以获得您想要的位置。有关使用像素或百分比的更多信息，本文有助于澄清以下内容：https://www.hongkiat.com/blog/css-units/
- 对于响应大小调整:使用媒体查询。使用！属性也很重要，因为它将根据屏幕大小赋予所需的适当值更多的权重。有关媒体查询的更多信息，请访问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
}
}在实际的例子中，我继续并将您的一些列表项放在所需的区域中，以展示它是如何工作的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70365768
复制相关文章
相似问题
腾讯云开发者
