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模板：（與角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> 

的輸出是不錯，但不是很一致：

其中大幅下降是罰款（對單詞預期行爲的一部分分開）。然而，中減少不與大幅下降

現在相同的像素，我知道這個代碼是不完美（CSS代碼），但我做了什麼錯？是它的：

{{徹底[ '短語']}}

未正確處理？

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>