Question

对于每周日历，我需要将事件的DIV放置在当天的外部DIV中。
为了在正确的时间定位这些DIV，我尝试使用具有最高值的绝对定位，但是如果我同时有多个事件，这将导致DIV相互堆叠。
我现在希望这些DIV“共享”外部DIV的宽度。

我已经尝试过flex解决方案，但似乎无法使用绝对位置。另外，将DIV放置在附加的DIV中以放置它们也不可行。

有人对解决方案有想法吗？谢谢！

    .tagclmn {
        width: 300px;
        font: 12.0px Helvetica;
        position: relative;
    }
    
    .veranstaltung {
        border-radius: 4px;
        position: absolute;
        width: 100%;
    }

        <div class="tagclmn">
            <div class="veranstaltung" style="top: 200px; height: 200px; background-color: red;">
                <div class="container">
                    <div class="title">Testvorlesung</div>
                    <div class="time">10:00 - 12:00 st</div>
                    <div class="place">W.11.010</div>
                </div>
            </div>
            <div class="veranstaltung" style="top: 400px; height: 200px; background-color: green;">
                <div class="container">
                    <div class="title">Testvorlesung 2</div>
                    <div class="time">12:00 - 14:00 st</div>
                    <div class="place">W.11.010</div>
                </div>
            </div>
            <div class="veranstaltung" style="top: 400px; height: 200px; background-color: blue;">
                <div class="container">
                    <div class="title">Testvorlesung 3</div>
                    <div class="time">12:00 - 14:00 st</div>
                    <div class="place">W.11.003</div>
                </div>
            </div>
        </div>

Answer 1

其中大部分可以通过CSS-Grid进行管理。

如果我们知道可用的完整小时数，则可以使用它来设置网格的行数。

假设我们从上午9点到下午5点操作日记，这意味着要排8行。

然后，我们添加类来告诉每个约会，约会持续多长时间（跨度）以及开始于哪个小时（开始）。

然后：

.tagclmn {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: grid;
  grid-template-rows: repeat(8, minmax(3em, 1fr));
  grid-gap: 4px;
}

[class^="span"] {
  grid-column: 1 / -1;
}

.span-2 {
  grid-row: 1 / span 2;
}

.span-3 {
  grid-row: 1 / span 3;
}

.start-2 {
  grid-row-start: 2;
}

.start-4 {
  grid-row-start: 4;
}

.start-8 {
  grid-row-start: 8;
}

<div class="tagclmn">
  <div class="veranstaltung span-2 start-2" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">10:00 - 12:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
  <div class="veranstaltung span-1 start-4" style="background-color: lightgreen;">
    <div class="container">
      <div class="title">Testvorlesung 2</div>
      <div class="time">12:00 - 13:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
  <div class="veranstaltung span-2 start-4" style="background-color: lightblue;">
    <div class="container">
      <div class="title">Testvorlesung 3</div>
      <div class="time">12:00 - 14:00 st</div>
      <div class="place">W.11.003</div>
    </div>
  </div>
  <div class="veranstaltung span-1 start-8" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">16:00 - 17:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>

  <div class="veranstaltung span-3 start-4" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">12:00 - 15:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
</div>

注意：.veranstaltung在DOM中的顺序与它们的视觉顺序无关，这意味着，如果应用了正确的直到分类，则可以不添加约会。在HTML中顺序排列。

Answer 2

您可以在第二个项目中简单地添加50％的宽度和50％的左侧宽度，但是我不确定这是否是您要的答案。

Public Sub myExit(ByVal Cancel As MSForms.ReturnBoolean)
Attribute myExit.VB_UserMemId = -2147384829
'code
End Sub

这样，您还可以提高第3课的水平，例如从13:00到15:00，它仍然有效

如何使绝对定位的DIV共享外部DIV的宽度？

2 个答案: