положение: абсолютные дисплеи перекрывают друг друга - PullRequest
Новая
       2

положение: абсолютные дисплеи перекрывают друг друга

0 голосов
/ 28 мая 2018

Я хочу сделать календарь в HTML.Это то, что я сделал до сих пор: enter image description here

Я использую position: absolute для позиционирования синих событий, но события покрывают друг друга.Если два события происходят одновременно, ширина двух событий должна составлять половину каждого. 

<div class="event" [style.top]="calcTop(calendarEvent)"  [style.height]="calcHeight(calendarEvent)">
   <div> {{ calendarEvent.name }} </div>
</div>

.event {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: mat-color($app-primary, 600);
    text-align: center;
    border: #000 solid 1px;
    color: #fff;
    z-index: 20;
    clear: both;

1 Ответ

0 голосов
/ 28 мая 2018

Как я понял, вам нужно, чтобы события одновременно появлялись рядом друг с другом.Используя flex, вы можете легко достичь этого.Все, что вам нужно сделать, это обернуть события div внутри контейнера и применить к нему некоторую гибкость: P.Давайте назовем контейнер как events-container.Вот магический код 

.events-container {
    display: flex;
}
.events {
    flex: 1;
}

Вот рабочий ручка .

...