правой выравнивать текст на дисплее прогибается

Мой код выглядит следующим образом:правой выравнивать текст на дисплее прогибается

<div className="listContent"> 
    <div> 
     <div className="titleAndCounterBox"> 
      <div className="headerListTitle">{list.name}</div><br /> 
      <div className="headerListExpires"> 
       <div>{formatTime(this.state.remainingTime).days}<span>{language.days}</span></div> 
       <div>{formatTime(this.state.remainingTime).hours}:{formatTime(this.state.remainingTime).minutes}:{formatTime(this.state.remainingTime).seconds}</div> 
      </div> 
     </div> 
     <div><img src={images.header_listInfo_png} /></div> 
     <div className="headerTotalCarsInTheList"><span>{totalCarsInTheList}</span></div> 

    </div> 
</div>

И мой СКС заключается в следующем:

.listContent { 
    display: flex; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: 0; 
    font-family: $remarketingFontFamily; 

    div { 
     display: flex; 
     align-items: center; 

     .titleAndCounterBox { 
     flex-wrap: wrap; 

     .headerListTitle { 
      font-size: $portalFontSize - 1; 
      color: $portalBlueColor; 
      flex-basis: 100%; 
     } 

     .headerListExpires { 
      font-size: $portalFontSize - 3; 
      color: $portalYellow; 

      div:first-child { 
      margin-right: 15px; 
      } 
     } 
     } 

     .headerTotalCarsInTheList { 

     text-align: center; 
     line-height: 40px; 
     color: $portalDarkGrey; 
     font-size: $infoTextSize + 6; 
     border: 1px solid $portalDarkGrey; 
     border-radius: 50%; 
     margin: 0 15px; 

     span{ 
      width: 40px; 
      height: 40px; 
     } 
     } 
    } 


    }

listContent (родитель дел) выглядит следующим образом:

И названиеAndCounterBox выглядит следующим образом:

То, что я хочу, что текст внутри titleAndCounterBox выровнен по правому краю. Что-то вроде:

Но я не в состоянии acommplish что.

Любые советы, как я могу это сделать?

источник

2016-10-27 Boky

Его заблуждение, вы говорите, что хотите «текст» внутри, чтобы быть правым, так что вы имеете в виду «33day 10:15:13 "текст? Если да, то это не направо в ожидаемом изображении, которое вы предоставили. –

Вы правы. Текст хорошо выровнен, но я хочу, чтобы ширина titleAndCounterBox была меньше. Я хочу, чтобы это было так же, как на последней фотографии. – Boky

Проверьте это [Codepen] (http://codepen.io/PleaseBugMeNot/pen/PGvYqW) - разве он уже не выглядит прямо сейчас. Я знаю ответ, но вам трудно сказать, что именно вы хотите. –

Вы можете немного изменить свой CSS :-) благодаря нашей дискуссии

.headerListTitle { 
    font-size: $portalFontSize - 1; 
    color: $portalBlueColor; 

    margin-left: auto; 
    flex-basis: 58%; 
    //you could replace these 2 lines with below 2 lines if you wish 

    //justify-content: flex-end; 
    //flex-basis: 89% (same as below row) 

} 

.headerListExpires { 
    font-size: $portalFontSize - 3; 
    color: $portalYellow; 
    flex-basis: 89%; 

    div:first-child { 
     margin-left: auto; 
     margin-right: 15px; 
    } 
}

источник

2016-10-27 13:17:14

правой выравнивать текст на дисплее прогибается

ответ

Смежные вопросы