位置：绝对显示相互覆盖

Question

我想用HTML制作日历。这是我到目前为止所做的：

我使用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;

Answer 1

据我所知，您需要同时出现彼此相邻的事件。使用flex，您可以轻松实现它。您所要做的就是将事件div包装在容器中并对其应用一些flex：P。让我们将容器称为事件容器。这是神奇的代码

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

这是一个有效的pen。