如何限制位置內的flex-grow div：相對div？

我想創建一個基本滑塊div，我得到了結構。如何限制位置內的flex-grow div：相對div？

我父母div與slider類三個孩子div稱爲Button1的buttpn2和範圍，我想按鈕display: relative這樣，當我使用left或right財產上的按鈕應該移動。

我意識到它是position: relative，但如何使所需的滑塊效果？

.slider { 
 
    width: 300px; 
 
    height: 5px; 
 
    background-color: #a0a0a0; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.slider div { 
 
    display: inline-block; 
 
} 
 

 
.button { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 5px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#button1 { 
 
    left: 25px; 
 
} 
 

 
#button2 { 
 
    right: 50px; 
 
} 
 

 
.button:hover { 
 
    cursor: pointer; 
 
} 
 

 
.range { 
 
    flex-grow: 2; 
 
    height: 5px; 
 
    background-color: blue; 
 
}

<div class="slider"> 
 
    <div class="button" id="button1"></div> 
 
    <div class="range"></div> 
 
    <div class="button" id="button2"></div> 
 
</div>

來源

2017-08-03 Rahul

設置的位置是：相對於上內含div，而不是按鈕。設置按鈕的位置：絕對;

.slider{ 
 
    width:300px; 
 
    height:5px; 
 
    background-color:#a0a0a0; 
 
    display:flex; 
 
    align-items:center; 
 
    position: relative; 
 
} 
 
.slider div{ 
 
    display: inline-block; 
 
} 
 
.button{ 
 
    width:10px; 
 
    height:10px; 
 
    border-radius:5px; 
 
    background-color:red; 
 
    position: absolute; 
 
} 
 
#button1{ 
 
    left:25px; 
 
} 
 
#button2{ 
 
    right:50px; 
 
} 
 
.button:hover{ 
 
    cursor:pointer; 
 
} 
 
.range{ 
 
    flex-grow:2; 
 
    height:5px; 
 
    background-color:blue; 
 
}

<body> 
 
    <div class="slider"> 
 
    <div class="button" id="button1"></div> 
 
    <div class="range"></div> 
 
    <div class="button" id="button2"></div> 
 
    </div> 
 
</body>

來源

2017-08-03 18:02:11 James

藍色部分應該是紅色的按鈕之間！ – Rahul

我只是試圖幫助你的問題，而不是爲你做所有的工作！ – James

如何限制位置內的flex-grow div：相對div？

回答

相關問題