如何定位绝对元素并处理元素溢出的情况（没有滚动条）答案

【问题标题】：How to position absolute elements and take care of case of overflow of the element (without scroller)如何定位绝对元素并处理元素溢出的情况（没有滚动条）
【发布时间】：2021-07-02 17:20:32
【问题描述】：

我正在制作这个日历，我在行内以绝对位置定位元素，如下所示：

每个元素都以绝对位置定位，因此它不是流程的一部分，所以问题是，如果我有一个元素内的文本太长，则该元素将滑落并覆盖/将被另一个元素覆盖元素，像这样：

现在理想情况下，我希望覆盖长元素的元素下降。但是因为长元素是用绝对位置而不是相对位置定位的，所以他不能向下推元素（我不想在长元素上使用滚动，我想看到整个文本）。

而且我也不能使用相对位置，因为那样我将无法将元素定位在 X 轴上，因为它们会将其他元素向左推它们的宽度。我不希望这样，因为位置是按事件发生的天数计算的。

基本上我需要 X 轴上的绝对位置，以及 Y 轴上的相对位置。

任何有关如何解决此问题的想法都将不胜感激。（也许图书馆可以做上面的事情^）

编辑：也不能使用网格，因为我想支持旧浏览器。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

实际上我会使用引导网格系统，它可以让你在行内均匀地定位列。

另外，我想说如果一个元素需要更多的空间，整行应该展开。

看看：

.col{
border: solid 1px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col">
    Wow that is a really long text that is slipping
  </div>

  <div class="col">
    text
  </div>

  <div class="col">
    text
  </div>


</div>

<div class="row">

  <div class="col">
    text
  </div>

  <div class="col">
    text
  </div>

  <div class="col">
            Wow that is a really long text that is slipping even more than the last one

  </div>


</div>

<div class="row">

  <div class="col">
    text
  </div>

  <div class="col">
    text
  </div>

  <div class="col">
    text
  </div>


</div>

我添加了边框属性，以便您看得更清楚。

您可以阅读docs 了解其工作原理

祝你好运。

【讨论】：

忘了说，不能用grid，我要支持老浏览器。