使父 div 内的子 div 等宽且流畅

Question

我怎样才能让孩子3div与类.box具有相同的width，而流体占据整个父container div，而住inline。

这是一个小提琴

#container {
  width: 20em;
  background: red;
  text-align: center;
}
.box {
  display: inline-block;
  margin: 1em;
  border: 1px solid #000;
}

<div id="container">

  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>

Answer 1

使用CSS Flexbox的为

#container {
  width: 20em;
  display: flex;
  background: red;
  text-align: center;
}
.box {
  flex: 1;
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

或者

inline-block像您已经在使用的那样使用，并进行一些调整。

* {
  box-sizing: border-box
}
#container {
  width: 20em;
  background: red;
  text-align:center
}
.box {
  font-size: 16px;
  display: inline-block;
  width: calc(100% / 3);
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>

或者

使用CSS 表来支持旧浏览器

#container {
  width: 20em;
  display: table;
  background: red;
  text-align: center;
}
.box {
  display:table-cell;
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>
</div>