html - CSS 将第二个文本与可能长或短的第一个文本对齐

Question

编辑: https://jsfiddle.net/mLtnofps/

这显示了“移动设备”尺寸上的问题 - 由于绿色文本的左侧文本，文本未对齐

目前这是负责对齐的css代码:

  .info-block .desc {
border-top: 1px solid #e4e8ea;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
margin-top: .5rem;
padding-top: .5rem;
text-transform: none; }
.info-block .desc .desc__info {
  color: #90da85; }

这是 HTML 模板:(使用 Angular 4)

<div class="info-block" *ngIf="chosenGraphPoint">
            <div class="current"><span>{{ chosenGraphPoint['date'] }}&nbsp;·&nbsp;
                <span class="amount">${{ chosenGraphPoint['stockValue'] }}</span></span>
                <span class="percentage profit" 
                [ngStyle]="{ 'color': chosenGraphPoint['dailyYield'][0] === '+' ? 'green' : (chosenGraphPoint['dailyYield'][0] === '-' ? 'red' : '#4d5a64')}">
                    {{ chosenGraphPoint['dailyYield'] }}</span></div>
            <div class="desc" *ngFor="let outright of changeReason">
                {{ outright['phrase'] }}
                <div class="desc__info" [ngStyle]="{ 'color': outright['color'] }">{{ decideImpact(outright['impact']) }}</div>
            </div>
            <div class="news" *ngFor="let tNews of todayNews">
                <div class="news__item" [routerLink]="['/news', tNews.id]" [queryParams]="{date: todayDate, stockId: stock.id}"
                 style="cursor: pointer">NEWS · {{ tNews.source }} · {{ tNews.title }}</div>
            </div>
</div>

相关部分是:

    <div class="desc" *ngFor="let outright of changeReason">
                {{ outright['phrase'] }}
                <div class="desc__info" [ngStyle]="{ 'color': outright['color'] }">{{ decideImpact(outright['impact']) }}</div>
    </div>

输出很好但不是很对齐:

Large Decrease 没问题的部分(单词拆分的预期行为)。但是，Medium Decrease 与 Large Decrease 不在同一像素上

现在，我知道这段代码并不完美(CSS 代码)，但我做错了什么？是不是:

{{ outright['phrase'] }}

没有正确处理？

Answer 1

您可以使用表格布局显示而不是 flexbox 模型:

.info-block {
  color: #4d5a64;
  min-width: 100%;
  box-sizing:border-box;
  padding: 0 2rem;
  position: relative;
  text-transform: uppercase;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  display:table;/* update */
  table-layout:fixed;/* update */
  border-spacing:0 0.25rem;
}
.info-block .desc {
  border-top: 1px solid #e4e8ea;   
  display: table-row; /* update */
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  text-transform: none;
  box-shadow:0 -1px 0  #e4e8ea;  /*instead border where border-spacing or collapse not reset to 0 */
}
.info-block .desc .desc__info {
  color: #90da85;
  display:table-cell;/* update */
   white-space:nowrap;/* if to keep on a single line */
}


.info-block span:last-of-type {
  width:0;
  text-align:right;
  display:table-cell;
}
.info-block  .current {
  display:table-row;
  box-shadow:0 -1px 0  #e4e8ea;
}
.info-block  .news {
  display:table-row;
  box-shadow:0 -1px 0  #e4e8ea;
}


 .info-block .percentage {
  font-weight: 700;
}

.info-block.bordered {
  border-bottom: 1px solid #e4e8ea;
  margin-bottom: 1rem;
}

.info-block .percentage.profit {
  color: #15c235;
}

.info-block .percentage.loss {
  color: #fc3021;
}

.info-block .news {
  border-top: 1px solid #e4e8ea;
  margin-top: .5rem;
  padding-top: .5rem;
}

.info-block .news .news__item {
  color: #4cabd7;
  text-decoration: underline;
}

<div class="info-block">
  <div class="current">
    <span>18.Nov 2017&nbsp;·&nbsp;<span class="amount">$254</span>
    </span>
    <span class="percentage profit">+3.5%</span></div>
  <div class="desc">Won EPL Game against REEDING
    <div class="desc__info">Dramatic Increase</div>
  </div>
  <div class="desc">Won EPL Game against REEDING
    <div class="desc__info">Dramatic Increase</div>
  </div>
  <div class="desc">Expecteations for the EFL cup got better
    <div class="desc__info">Dramatic Increase</div>
  </div>
  <div class="news">
    <div class="news__item">NEWS · CNN · Lorem Ipsum News Item</div>
  </div>