具有固定和响应元素的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左侧或右侧的任何固定div，我该如何做到这一点，这个响应div会扩展以填充包装器的大小？

（只有css，跨浏览器）

谢谢！

Answer 1

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div id="wrapper">

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

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

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

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

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用display: table和table-layout: fixed的组合，并为非流体div设置固定宽度。

这适用于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可以做到这一点。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

you can use display:table property instead of position

working fiddle



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

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