it-swarm.com.ru

Выровняйте по левому и правому краю в названии карты

Используя следующий код в Angular 5:

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

Я получаю это: One text

Как я могу получить это (часть текста выровнена по левому краю, часть текста выровнена по правому краю)? enter image description here

Я попытался создать div и поместить внутри абзацев с предопределенным css, но это не сработало.

2
trthhrtz

Вы также можете сделать это с меньшим количеством строк и лучше приспособить его к содержанию, используя свойства контейнера и flex: 

<mat-card class="card-container">
  <mat-card-title > Test message </mat-card-title>
  <mat-card-title> Test message </mat-card-title>
</mat-card>

и этот CSS: 

.card-container {
  /*  not needed styles to reflect it */ 
  background: blue;
  padding: 10px;
  color: white;
  /* needed styles below */
  display: flex;
  justify-content: space-between;
  width: 500px;
}

Вы можете проверить рабочий образец здесь: https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

Это гарантирует, что, если вы отрегулируете ширину в соответствии с нужным вам контейнером, стиль будет корректно подстраиваться под размер, не ломаясь, и сохранит ваш HTML ясным и легким для чтения.

5
Vanessa

Используйте flexbox:

.container {
  display: flex;
}

.fill {
  flex: 1;
}
<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>

5
Tomasz Kula

Я не могу видеть изображения, но вот как вы можете разделить текст в div, используя гибкий макет

.container {
  /* Style */
  height: 64px;
  line-height: 64px;
  background: teal;
  color: white;
  font-family: Helvetica;
  padding: 12px;
  box-sizing: border-box;
  /* Actual logic */
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div:last-child {
  text-align: right;
}

.container div {
  flex: 1 1 auto;
}
<div class="container">
  <div>Card</div>
  <div>Title</div>
</div>

1
trichetriche

Несмотря на то, что предыдущие постеры решают этот вопрос в достаточной степени, после добавления содержимого карточки все становится сложнее .... Я бы посоветовал взглянуть на этот ответ для более полного решения: Как выровнять текстовую карточку слева и справа по тексту Заголовок в Angular 4?

0
erin