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

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 3

you can use display:table property instead of position

working fiddle



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

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

Answer 4

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>

Css 具有固定和响应元素的流畅布局

Css fluid layout with fixed and responsive elements

css

fluid

responsive-design