我想建立一個垂直等距垂直條紋的豎線。即使窗口高度發生變化，它們也應保持這種狀態（點的大小不變，但它們之間的空間發生變化）。我想在不使用JS的情況下實現這一點。第一個和最後一個點應該留在條的頂部和底部。做這個的最好方式是什麼？居中多個div垂直和響應
我寫了一個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>
您可以使用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; \t
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>您可以使用下面的CSS來實現這一目標：
.wrap-side-bar {
display:flex;
align-item:center;
justify-content:space-around;
flex-direction:column;
}
我實現了與absolute定位點的預期效果，hovewer這將需要爲較小的高度添加一些額外的風格，但我相信你可以從這裏拿走它:)。如果這不是你想要的任何理由讓我知道，但因爲你已經確定了你的.bar絕對我認爲它會好的。
謝謝！這是一個很好的方法，但是當降低高度時，點之間的空間比例不確定（它們開始具有不同的大小） –
您可以使用此代碼
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap-side-bar{
\t width:30px;
\t background-color:#FFF;
\t height:100%;
\t position:absolute;
\t right:0px;
\t 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{
\t position:absolute;
\t height:100%;
\t width:10px;
\t background-color:green; \t
\t margin:0 10px;
\t border-radius:10px;
\t z-index:-1;
}
.gradient::after, .gradient-bar {
\t background-color:#00ca3e;
\t filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00ca3e, endColorstr=#0018ff);
\t background-image:-moz-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
\t background-image:-webkit-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
\t background-image:-ms-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
\t background-image:linear-gradient(top, #00ca3e 7%, #0018ff 100%);
\t background-image:-o-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
\t 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%;
}<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>下面是wscourge答案updated_jsfiddle與點的更好positionning的更新版本。
一等品三點
transform: translateX(-50%) translateY(-50%);
和最後一個
transform: translateX(-50%) translateY(50%);
這是優秀的，謝謝。 （在Firefox上，第一個點不出現，但我不需要Firefox支持） –