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

Question

我想要什么

带文字的DIV应该与文本所需的一样宽。

Bar DIV应该与占用所有剩余空间所需的宽度（宽度相等）相同。 DIV是动态添加的，因此最好避免使用绝对大小，例如宽度= 25％。

栏之间的空格应为5px。

我拥有什么

http://jsfiddle.net/5uzbxvss/1/

的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容器，并为嵌套在其中的每个div分配flex-grow: 1。

支持所有现代浏览器+ 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表格：

• 使.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>