我想在DIV中做竖线
然后我想在垂直线上对 img 进行分层。 (图片是我想要的结果)
我的源代码是这样的。
<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">
<img src="triangle.png">
如何对这些元素进行分层???
最佳答案
您需要做一些数学运算才能在中心调整它。
.outer-flex {
display: flex;
width: 40px;
align-items: center;
position: absolute;
}
.line {
background-color: gray;
width: 1px;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.circle {
position: absolute;
left: calc(50% - 15px);
top: 20px;
border: 5px solid white;
border-radius: 20px;
}
.arrow {
position: absolute;
top: 70vh;
left: calc(50% - 15px)
}
<div class="outer-flex">
<div class="line"></div>
<img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">
<img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>
关于html - 窄 DIV 上的图层图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58667450/