Div填充2个div之间的空间

Question

如何让所有div都在同一行上，并在div＃2中填充左浮动div＃1和右浮动div＃3之间的空间？

Answer 1

也许flex会对您有所帮助，这里是JSFiddle。

<强> HTML

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

<强> CSS

.parent {
    display: -webkit-flex;
    display: flex;
}
.div1 {
    width: 30px;
    height: 30px;
    background: #FFCC99;
}
.div3 {
    width: 30px;
    height: 30px;
    background: #FCF305;
}
.div2 {
    -webkit-flex: auto;
    flex: auto;
    height: 30px;
    background: #CCFFCC;
}

Answer 2

这是一个虚拟实现：

<div id="l"></div>

<div id="r"></div>

<div id="c"></div>

<style>
#l {
float: left;
width:30%;
}
#r { 
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>

Answer 3

您可以使用display: table进行此类实施（注意这不是使用表格进行布局）：

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  display: table;
  width: 100vw;
}
.one {
  display: table-cell;
  height: 50px;
  width: 20%;
  background: red;
}
.two {
  display: table-cell;
  height: 50%;
  width: 60%;
  background: cornflowerblue;
}
.three {
  display: table-cell;
  background: lime;
  height: 50px;
}

<div class="wrap">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

注意我没有在最后一个元素上设置宽度，但它是否填充了剩余的可用空间？