【问题标题】：Fixed width text + fluid boxes horizontally固定宽度文本+水平流动框
【发布时间】：2015-10-08 01:04:44
【问题描述】：

我想要什么

带有文本的 DIV 应与文本所需的宽度一样宽。

条形 DIV 应与占用所有剩余空间所需的宽度一样宽（宽度相等）。 DIV 是动态添加的，因此最好避免使用绝对大小，例如每个 DIV 的 width=25%。

条之间的间距应为 5px。

我有什么

html

<div class="container">
    <div class="title">
        <h3>Text</h3>
    </div>

    <div class="bars">
        <div class="outer">
            <div id="task_bar_1" class="inner">
                0%
            </div>
        </div>

        <div class="outer">
            <div id="task_bar_2" class="inner">
                0%
            </div>
        </div>

        <div class="outer">
            <div id="task_bar_3" class="inner">
                0%
            </div>
        </div>

        <div class="outer">
            <div id="task_bar_4" class="inner">
                0%
            </div>
        </div>
    </div>
</div>

css

body {
    margin: 0;
}

.container {
}

.title {
    float: left;
}

.container h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2px;
}

.bars {
    overflow: hidden;
}

.outer {
    background-color: grey;
    padding: 3px;
    margin-left: 5px;
    float: left;
}

.inner {
    background-color: orange;
    color: white;
    text-align: center;
}

【问题讨论】：

适合现代浏览器吗？

标签： html css layout flexbox

【解决方案1】：

您可以使用灵活的盒子解决方案来解决您的问题。创建一个 flexbox 容器并将 flex-grow: 1 分配给嵌套在其中的每个 div。

支持所有现代浏览器 + IE11 :P Browser Support

body {
  margin: 0;
}
.container {} .title {
  float: left;
}
.container h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 2px;
}
.bars {
  overflow: hidden;
  display: flex; /* Add */
}
.outer {
  background-color: grey;
  padding: 3px;
  margin-left: 5px;
  float: left;
  flex-grow: 1; /* Add */
}
.inner {
  background-color: orange;
  color: white;
  text-align: center;
  flex-grow: 1 /* Add */
}

<div class="container">
  <div class="title">
    <h3>I am a very long text to test it</h3>
  </div>

  <div class="bars">
    <div class="outer">
      <div id="task_bar_1" class="inner">
        0%
      </div>
    </div>

    <div class="outer">
      <div id="task_bar_2" class="inner">
        0%
      </div>
    </div>

    <div class="outer">
      <div id="task_bar_3" class="inner">
        0%
      </div>
    </div>

    <div class="outer">
      <div id="task_bar_4" class="inner">
        0%
      </div>
    </div>
  </div>
</div>

【讨论】：

这很酷。谢谢！但是.. 是否有针对旧版本（最好是 IE8）的解决方案？
你可以使用 JavaScript 找到文本的偏移宽度，然后计算剩余的宽度。 IE8 太旧了，无法开发。开始为 IE10+ 开发。

【解决方案2】：

您可以使用 CSS 表格：

将.container 制作成与正文一样宽的表格：
```
.container {
  display: table;
  width: 100%;
}
```
将.title 设为该表格的一个单元格，并将其宽度设置为其内容所需的最小值：
```
.title {
  display: table-cell;
  width: 0;
  white-space: nowrap;
}
```
.bars 将被包裹在一个匿名表格单元中，它将覆盖.title 留下的所有剩余空间
将.bars 设为与匿名表格单元格一样宽的表格，在单元格之间平均分配其宽度（忽略其内容），并在单元格之间添加 5px 间隔：
```
.bars {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}
```
制作该表的.outer 单元格：
```
.outer {
  display: table-cell;
}
```

body {
  margin: 0;
}
.container {
  display: table;
  width: 100%;
}
.title {
  display: table-cell;
  width: 0;
  white-space: nowrap;
}
.title h3 {
  margin: 0;
  padding-top: 2px;
}
.bars {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px;
}
.outer {
  background-color: grey;
  padding: 3px;
  display: table-cell;
}
.inner {
  background-color: orange;
  color: white;
  text-align: center;
}

<div class="container">
  <div class="title">
    <h3>Text</h3>
  </div>
  <div class="bars">
    <div class="outer">
      <div id="task_bar_1" class="inner">0%</div>
    </div>
    <div class="outer">
      <div id="task_bar_2" class="inner">0%</div>
    </div>
    <div class="outer">
      <div id="task_bar_3" class="inner">0%</div>
    </div>
    <div class="outer">
      <div id="task_bar_4" class="inner">0%</div>
    </div>
  </div>
</div>

【讨论】：