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。尝试以下解决方案：

＆＃13;

* { 
  -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));
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用以下css来实现此目的：

.wrap-side-bar {
    display:flex; 
    align-item:center; 
    justify-content:space-around; 
    flex-direction:column;
}

Answer 3

我通过absolute点的定位达到了预期的效果，但是对于较小的高度，它需要很少的额外样式，但我确定你可以从这里拿走它:) 。如果它不是您正在寻找的任何理由让我知道，但正如您已经定位了.bar我绝对认为它会没事。

＆＃13;

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

.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;
  width: 20px;
  z-index:20;  
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  left: 50%;
}
.dot:first-child {
  top: 0;
}
.dot.two {
  transform: translateY(-50%, -50%);
  top: 33%;
}
.dot.three {
  transform: translateY(-50%, -50%);
  top: 66%;
}
.dot:last-child {
  bottom: 0;
}
.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));
 }

＆＃13;

<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 two gradient"></div>
    <div class="dot three gradient"></div>
    <div class="dot gradient"></div>
  </div>
</div>

＆＃13;

Answer 4

以下是wscourge answer updated_jsfiddle的更新版本，其中包含更好的点位置。

第一点

transform: translateX(-50%) translateY(-50%);

和最后一个

transform: translateX(-50%) translateY(50%);

Answer 5

您可以使用此代码

＆＃13;

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
 box-sizing: border-box; 
}

.wrap-side-bar{
	width:30px;
	background-color:#FFF;
	height:100%;
	position:absolute;
	right:0px;
	padding:15px 0;
  z-index:-5;
}
.dot {
  background-color: gren;
  border-radius: 10px;
  height: 25%;
  margin: 0 auto;
  width: 20px;
  z-index:20;
  position: relative;
}
.bar{
	position:absolute;
	height:100%;
	width:10px;
	background-color:green;	
	margin:0 10px;
	border-radius:10px;
	z-index:-1;
}

.gradient::after, .gradient-bar {
	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));
 }
.dot::after {
position: absolute;
  content: "";
  top:50%;
  margin-top: -10px;
  height: 20px;
  width: 20px;
  left: 0;
  border-radius: 50%;
}

＆＃13;

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

＆＃13;

垂直和响应地居中多个div

5 个答案: