HTML - оверлейные элементы - PullRequest
Новая
       12

HTML - оверлейные элементы

0 голосов
/ 26 сентября 2018

Я работаю с Ionic2 и пытаюсь отобразить список строк: каждая строка разделена на 2 части, левую и правую, с соответствующим цветом фона.

Это мой код (внутри простого ионного ряда) 

<ion-col col-6 [ngStyle]="{'background-color': leftColor}">Hi</ion-col>
<ion-col col-6 [ngStyle]="{'background-color': rightColor}"></ion-col>

И вот результат

enter image description here

Мне было интересно, как я мог понять этодва шага:

1) как получить строку с фиксированной высотой (в пикселях или аналогичной)

2) как можно наложить текстовый элемент в позиции, показанной на рисунке ниже (если текст был «длиннее» серой части, он будет продолжен на фиолетовой)

enter image description here

1 Ответ

0 голосов
/ 05 октября 2018

Я не большой поклонник ионной грид-системы, я думаю, что она слишком сложна для того, что вы можете легко сделать с помощью CSS-сеток.В вашем случае вам потребуется переопределить некоторые CSS или систему сетки, и это может конфликтовать с другим CSS на вашей странице, поэтому я рекомендую использовать сетку CSS вместо ионной сетки.

HTML: 

<div class="component">
  <p>A REALLY LOOOOOOOOOOOO OOOOOOOOOOOOO OOOOOOOOONG TEXT</p>
  <div class="grid">
    <div class="bg-1" [ngStyle]="{'background-color': leftColor}"></div>
    <div class="bg-2" [ngStyle]="{'background-color': rightColor}"></div>
  </div>
</div>

CSS 

.component {
  position: relative;

  p {
    position: absolute;
  }

  .grid {
    display: grid;
    grid-template: 90px / 1fr 1fr;
    // the first argument here is the height of the line, the second is how you divide your grid, in this case 2 columns that take both 1 fraction of the total width
  }
}

Надеюсь, это поможет.

...