当浮动不起作用时，如何并排获得这些进度条？

Question

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

我愿意接受flex解决方案，但我认为这将有一个相当容易的解决方案。

这里有一个小提琴：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

您必须在float:left

中应用max-width并将width更改为.full.bar

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;