我是网络开发的新手,我在 CSS 定位方面遇到了困难。
我正在尝试制作一个看起来像轴的 div 分隔符:https://ibb.co/pfv8wcm
调整窗口大小后,我在边框上添加的三 Angular 形失去了它们的位置:https://ibb.co/fS8707P
代码演示:https://liveweave.com/V4lTxA
我怎样才能使三 Angular 形在所有视口(viewport)上保持相同的位置?
最佳答案
您可以通过向容器添加“相对位置”来做到这一点。
<div class="container-fluid info-div position-relative">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="box"></div>
</div>
<p class="col-12 col-sm-6 col-md-9">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem odio porro
obcaecati id ad illo
accusantium maxime, corrupti deleniti doloremque.
</p>
</div>
</div>
然后需要将底部箭头css从right:0%修改为left:100%
.info-div:before {
bottom: -13px;
left: 100%;
border-top: 11px solid transparent;
border-left: 20px solid black;
border-bottom: 11px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
和顶部箭头:
.info-div:after {
top: -16px;
left: -13px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid black;
content: " ";
height: 0;
width: 0;
position: absolute;
}
关于html - 如何在边框上添加一个元素并让它在调整窗口大小时保持位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59073237/