固定宽度的文字+水平的流体框

debugcn 发表于 Dev

亚历克斯·梅

我想要的是

在此处输入图片说明

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

条形DIV应与占用所有其余空间所需的宽度一样（宽度相等）。DIV是动态添加的，因此最好避免使用绝对大小，例如每个大小的width = 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;
}

您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。