如何使点在css中响应答案

【问题标题】：how to make the dots responsive in css如何使点在css中响应
【发布时间】：2021-10-17 11:04:43
【问题描述】：

我创建了一个教育部分，如下所示

上述部分的 CSS 是

education-container 包含所有内容，education-box 用于盒子，education-divider 是分割盒子的线，education-traveler 用于平面

.education-container {
    position: relative;
    margin-top: 40px; 
    width: 70%;
}

.education-box{
    position: relative;
    width: 45%;
    border: 1px solid blue;
    background-color: whitesmoke;
    padding: 25px 25px 25px 25px;
    margin-bottom: 60px;
    min-height: 170px;
    overflow-wrap: break-word;
    box-shadow: 1px 1px 5px 2px  #2857a4;
}  

.education-box:nth-child(2n){
    left: 90%;
}

.education-box:nth-child(2n+1)::after{
    content: '';
    position: absolute;
    height: 0.8rem;
    width: 0.8rem;
    right: -37%;
    top: 50%;
    border-radius: 50%;
    background-color: black;
    z-index: 1;
    margin: auto;
}


.education-box:nth-child(2n)::after{
    content: '';
    position: absolute;
    height: 0.8rem;
    width: 0.8rem;
    left: -40%;
    top: 50%;
    border-radius: 50%;
    background-color: black;
    z-index: 1;
    margin: auto;
    
}
.education-divider{
    position: absolute;
    border: 2.5px dashed black;
    width: 0;
    height: 80%;
    left: 70%;
    top: 10%;
    font-weight: 500;
}

.education-traveller{
    position: sticky;   
    top: 25%;
    transform: rotate(90deg);
    font-size: 1.8rem;
    color: orangered;
    
}

但是一旦我减小屏幕尺寸，点就会从它的位置移动

谁能建议我如何对齐这些点，使其在所有屏幕尺寸下都保持在同一行？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： javascript html css responsive-design

【解决方案1】：

尝试使所有这些元素相对于中心，然后将它们偏移像素。

例如：

不要说left: 40%，而是将其替换为left: calc(50% - 16px) 或任何您需要的像素数量。对其他人重复此操作，无论屏幕大小如何，他们都应该留在同一个地方。

【讨论】：