固定宽度文本 + 水平流动框

Question

我想要什么

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

Bar DIVs 应该尽可能宽（宽度相等），因为它需要占用所有其余的 space。 DIVs 是动态添加的，所以最好避免绝对大小，比如每个 width=25%。

Space 条之间的距离应为 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;
}

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

Answer 2

您可以使用 CSS tables:

使 .container 与 body:

一样宽的 table

.container {
  display: table;
  width: 100%;
}

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

固定宽度文本 + 水平流动框

Fixed width text + fluid boxes horizontally

html

css

layout

flexbox

我想要什么

我有什么

html

css