将文本放在css水平条形图之前和之后

Question

这就是我想要做的。我有CSS水平条形图。问题是，我试图在前后获取一些文本。请看当前截图

​

​

.forecasting {
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0;
}

.forecasting p {
  padding: 0;
  letter-spacing: 1px;
  margin: 0 0 15px;
  color: #000;
  font-weight: bold;
}

.forecasting p:nth-child(2) {
  float: right;
  position: relative;
  top: -25px;
}

.forecast-bar {
  box-sizing: border-box;
  background: #fff;
  border: #0000CD 1px;
  border-style: solid;
}

.forecast-todate {
  width: 100%;
  height: 15px;
  background: #0000CD;
}

<div class="forecasting">
  <p>Name of person $30,777,854.19</p>
  <p>$30,777,854.19</p>

  <div class="forecast-bar">
    <div class="forecast-todate" style="width: 90%;"></div>
  </div>
</div>

​

我怎么才能先得到文本，中间是条形图，最后才是文本。

Answer 1

这就是你要找的吗？基本上，我已经将flexbox添加到您的主div中，以便将子元素放在一行中，并让align-items: center使它们水平居中

​

 .forecasting {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
 }

.forecasting p {
   padding: 0;
   letter-spacing: 1px;
   color: #000;
   font-weight: bold;
}

.forecast-bar {
    box-sizing: border-box;
    background: #fff;
    border: #0000CD 1px;
    border-style: solid;
    width: 80%;
    padding-right:20px;
    margin-right:10px;
}

.forecast-todate {
   width: 100%;
   height: 15px;
   background: #0000CD;
 }

 <div class="forecasting">
      <p>Name of person </p>

      <div class="forecast-bar" >
         <div class="forecast-todate" ></div>
      </div>
      <p>$30,777,854.19</p>
  </div>

​