Div 在 2 个 div 之间填充 space

Question

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

Answer 1

这是一个虚拟实现：

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

也许flex will help you, here is an 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 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>

请注意我没有在最后一个元素上设置宽度，但它却填满了剩余的 space 个可用元素？

Div 在 2 个 div 之间填充 space

Div fill space between 2 divs

html

space

between

fill