html - 当 float 不起作用时，如何并排显示这些进度条？

Question

我希望有两个并排的进度条，但是 float: left 不起作用。也不会将它们转换为 inside-block。

我愿意接受 flex 解决方案，但我假设这将有一个相当容易的修复。

fiddle 在这里:https://jsfiddle.net/8j606f85/

HTML:

<div class="row">
  <div class="full bar">
    <div class="progress bar">
      <div class="text">
        Text
      </div>
    </div>
  </div>
  <div class="full bar">
    <div class="progress bar">
      <div class="text">
        Text
      </div>
    </div>
  </div>
</div>

CSS:

.row {
  //????????
}

.full.bar {
  position: relative;
  display: block;
  max-width: 50%;   
  border: none;
  margin: 0.5em 0em 0.5em;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.1);
  padding: 0em;
  border-radius: 0.25rem;
}

.progress.bar {
  display: block;
  line-height: 1;
  position: relative;
  width: 50%;
  min-width: 2em;
  background: #888888;
  border-radius: 0.25rem;
  z-index: 200;
  height: 1.25em;
}

.text {
  white-space: nowrap;
  position: absolute;
  width: auto;
  font-size: 0.9375em;
  top: 50%;
  right: 0.5em;
  left: auto;
  bottom: auto;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: none;
  margin-top: -0.5em;
  font-weight: bold;
  text-align: left;
}

Answer 1

您必须在 .full.bar 中应用 float:left 并将 max-width 更改为 width >

.full.bar {
  position: relative;
  /*display: block; not needed - set by default */
  width: 50%;
  border: none;
  margin: 0.5em 0em 0.5em;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.1);
  padding: 0em;
  border-radius: 0.25rem;
  float:left
}
.progress.bar {
  /*display: block; not needed - set by default */
  line-height: 1;
  position: relative;
  width: 50%;
  min-width: 2em;
  background: #888;
  border-radius: 0.25rem;
  z-index: 200;
  height: 1.25em;
}
.text {
  white-space: nowrap;
  position: absolute;
  width: auto;
  font-size: 0.9375em;
  top: 50%;
  right: 0.5em;
  left: auto;
  bottom: auto;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: none;
  margin-top: -0.5em;
  font-weight: bold;
  text-align: left;
}

<div class="row">
  <div class="full bar">
    <div class="progress bar">
      <div class="text">
        Text
      </div>
    </div>
  </div>
  <div class="full bar">
    <div class="progress bar">
      <div class="text">
        Text
      </div>
    </div>
  </div>
</div>