html - 垂直和响应地居中多个 div

Question

我想构建一个垂直条，上面有垂直等间距的点。即使窗口高度发生变化，它们也应该保持这种状态(点大小不会改变，但它们之间的空间会发生变化)。我想在不使用 JS 的情况下实现这一点。第一个和最后一个点应该留在栏的顶部和底部。执行此操作的最佳方法是什么？

我写了一个 codepen 来让它更容易:

<div class="wrap-side-bar">
  <div style="position:relative;width:100%;height:100%;">

    <div class="bar gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
  </div>
</div>

Exemple on codepen

Answer 1

你可以使用 flexbox。尝试以下解决方案:

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
.container {
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
  position:relative;
  width:100%;
}
.wrap-side-bar{
  width:30px;
  background-color:#FFF;
  height:100%;
  position:absolute;
  right:0px;
  padding:15px 0;
  z-index:-5;
}
.dot {
  background-color: green;
  border-radius: 10px;
  height: 20px;
  margin: 0 auto;
  width: 20px;
  z-index:20;
}
.bar{
  position:absolute;
  height:100%;
  width:10px;
  background-color:green;	
  margin:0 10px;
  border-radius:10px;
  z-index:-1;
}
.gradient{
  background-color:#00ca3e;
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00ca3e, endColorstr=#0018ff);
  background-image:-moz-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-webkit-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-ms-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-o-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-webkit-gradient(linear, right top, right bottom, color-stop(7%,#00ca3e), color-stop(100%,#0018ff));
}

<div class="wrap-side-bar">
  <div class="container">
    <div class="bar gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
  </div>
</div>