html - 防止流体容器内右定位的 div 换行

Question

所以我在一个容器内有一个红色条，它位于两个黑框之间。盒子的大小是固定的，而红色条和容器是基于百分比的。

我的目标是减小容器的大小，同时不让右边的黑框出现在下一行中。我能够通过 JavaScript 中的自定义数学计算解决问题，但我想将功能和设计分开。我觉得一定有一些方法可以用 CSS 解决这个问题，而无需 hack 或额外的 div 标签。

如何实现？

.container {
  width: 80%;
  height: 40px;
  background: grey;
}
.box {
  height: 50%;
  border: 15px solid black;
  border-top: none;
  border-bottom: none;
  float: left;
}
.bar {
  width: 80%;
  height: 100%;
  background: red;
  float: left
}

<div class="container">
  <div class="box"></div>
  <div class="bar"></div>
  <div class="box"></div>
</div>

JSFiddle

Answer 1

CSS3 具有主流浏览器支持的新的 flex 显示样式。

.container {
  display: webkit-flex;
  display: flex;
  height: 40px;
  background: grey;
}
.box {
  height: 50%;
  border: 15px solid black;
  border-top: none;
  border-bottom: none;
}
.bar {
  width: 100%;
  height: 100%;
  background: red;
}

<div class="container">
  <div class="box"></div>
  <div class="bar"></div>
  <div class="box"></div>
</div>

要将框元素设置为特定宽度，请使用 min-width 而不是 width