固定和响应元素的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/