Question

https://stackblitz.com/edit/horizontal-tl

请先参考以上链接

有一个类名为“ timelinebar”的div，它被跟踪显示在具有“ events”类的div列表的顶部，并且这些div在滚动x轴上溢出，问题是时间轴类div即使宽度的100％无法涵盖所有潜在要素

Answer 1

有一个简单的解决方案，将mainDiv包裹在一个容器中（例如mainDivContainer），然后将此容器设置为position: relative;而不是mainDiv。现在，时间轴栏将相对于内容而不是视口。

这是您的{@ 3}}

这是关于主题的fork。

Answer 2

这是设计html时经常发生的问题。 BTW高度为100％时也会遇到同样的问题。

出现问题是因为.timelinebar的位置是绝对的，而其他位置则不在此位置。要使宽度达到100％，您的所有div都需要在同一平面上流动。因为对于位置而言，绝对父节点的宽度为100％表示屏幕的100％，但不是100％的溢出。您需要使用没有位置的其他方法：绝对。

由于没有通用的解决方案，每个解决方案都取决于特定的设计。

其他解决方案是使用javascript通过.offsetWidth属性检测元素的实际宽度，然后为.timelinebar div width .style.width = x +“ px”;设置像素的宽度。但我仅保留用于极端情况。

Answer 3

您可以使用以下解决方案

.mainDiv {
  width:100%;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  border: 1px #ddd solid;
  position: relative;
  height: 300px
}

.mainDiv > .events {
  display: inline-block;
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  height: 240px;
  position: relative;
  width: 200px;
  white-space: nowrap;
}

.mainDiv > .events::after {
  content: "";
  position: absolute;
  height: 8px;
  top: 50%;
  left: 0px;
  width: calc(100% + 25px );
  /* width: 100%; */
  /* overflow-y: hidden; */
  overflow: auto;
  display: inline-block;
  white-space: nowrap;
  background-color: black;
}

.mainDiv > .events:last-child::after {
  width: calc(100%);
}

<div id="mainDiv" class="mainDiv">
  
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
  <div class="events">1</div>
</div>

我删除了时间轴栏，并在所有事件div的after元素中添加了一个带有时间轴栏所有属性的行。如果您不需要一个div来显示中间的黑线，则可以使用此解决方案

溢出时无法将事件div扩展到整个屏幕

3 个答案: