固定和響應元素的CSS流動佈局

Question

我有這樣的佈局：

<div id="wrapper"> 
    <div class="prev"></div> 
    <div class="pause"></div> 
    <div class="seekbar"></div> 
    <div class="next"></div> 
    <div class="volume"></div> 
</div> 

https://jsfiddle.net/a9vvckwd/1/

讓右div的和固定的大小，而格中間響應。

我該如何做到這一點，如果我刪除任何固定div的左側或右側的響應div，這個響應div將擴大到填充包裝的大小？

（只是css，跨瀏覽器）

謝謝！

Answer 1

display:flex和flex-grow: 1;可以做到這一點。

給display: flex;到#wrapper和.seekbar到flex-grow: 1;

#wrapper { 
 
    position: relative; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 
.prev { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    height: 40px; 
 
    flex-grow: 1; 
 
    background: green; 
 
} 
 
.next { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ad3; 
 
}

<div id="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div>

Answer 2

使用display: table和table-layout: fixed的組合並設置非流體格的固定寬度。

這將工作在IE8 +和所有真正的瀏覽器。

#wrapper { 
 
    position: relative; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
} 
 

 
#wrapper > div { 
 
    display: table-cell; 
 
} 
 
.prev { 
 
    width: 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    width: 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    background: green; 
 
} 
 
.next { 
 
    width: 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    width: 40px; 
 
    background: #ad3; 
 
}

<div id="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div>

Answer 3

Flexbox，就可以做到這一點。

.wrapper { 
 
    position: relative; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 
.prev { 
 
    flex: 0 0 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    flex: 0 0 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    flex: 1; 
 
    background: green; 
 
} 
 
.next { 
 
    flex: 0 0 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    flex: 0 0 40px; 
 
    background: #ad3; 
 
}

<div class="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div> 
 

 

 
<div class="wrapper"> 
 

 
    <div class="prev"></div> 
 

 

 
    <div class="seekbar"></div> 
 

 

 
    <div class="volume"></div> 
 

 
</div>

Answer 4

you can use display:table property instead of position 

working fiddle 



    https://jsfiddle.net/a9vvckwd/3/ 

https://jsfiddle.net/a9vvckwd/3/