html - 无法在 div 上应用动态高度 - 时间轴 View

标签 html css flexbox css-grid

我正在尝试构建一个水平时间轴。一个月中的任何一天都可能发生许多事件。

因此，当事件较多时，列表项无法容纳可用高度(from: min-height)，出现垂直滚动。

如果我尝试删除 min-height 整个内容就会失真。我希望容器在没有垂直滚动的情况下占据包含任意数量元素的列表。

此外，还有一个问题，当窗口较小时(可以在codepen上看到)，出现水平滚动(预期和需要)。但是，连接器并未占据整个滚动宽度。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline__container {
  background: #c0ffee;
  overflow-x: auto;
  display: flex;
  position: relative;
}
.timeline__connector {
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  background: #ccc;
}
.timeline__item {
  background: gold;
  min-width: 85px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.timeline__item:nth-child(2n) {
  flex-direction: column-reverse;
}
.timeline__up {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline__down {
  height: 100%;
  display: flex;
}
.timeline__month {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: inline-block;
}
.timeline__month-up {
  margin-bottom: 20px;
  align-self: flex-end;
}
.timeline__month-down {
  align-self: flex-start;
  margin-top: 20px;
}
.timeline__count {
  margin: auto;
}
.timeline__count-up {
  margin-bottom: 20px;
}
.timeline__count-down {
  margin-top: 20px;
}
.timeline__item-event {
  min-width: 180px;
}
.timeline__event__list {
  height: 100%;
}
.timeline__event__list ul {
  margin-left: 20px;
}
<div class="timeline__container">
  <div class="timeline__connector"></div>
  <div class="timeline__item">
    <div class="timeline__up">
      <div class="timeline__month timeline__month-down">JAN</div>
    </div>
    <div class="timeline__down">
      <div class="timeline__count timeline__count-up">5</div>
    </div>
  </div>
  <div class="timeline__item">
    <div class="timeline__up">
      <div class="timeline__month timeline__month-up">FEB</div>
    </div>
    <div class="timeline__down">
      <div class="timeline__count timeline__count-down">15</div>
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">5th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>inventore nihil sint est.</li>
          <li>Lorem ipsum dolor sit</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">
<!--       <div class="timeline__count timeline__count-up">5</div> -->
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">15th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>inventore nihil sint est.</li>
          <li>Lorem ipsum dolor sit</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">
      
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">25th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">      
    </div>
  </div>
</div>

Codepen同样

最佳答案

我想出了一个想法，将 flex 和 grid 结合起来，以实现您正在寻找的东西。

添加了一个片段，我尽量保持代码简洁，对其中一些代码添加了注释，这样代码就可以自己说话了。根本没有改变 DOM 结构。 但是等等，看看这个:

Also, there is one more issue, when the window is small(can be seen on codepen), the horizontal scroll appears(expected and needed). But, the connector is not occupying the whole scroll width.

为了解决上述问题，我将 .timeline__container 包装到 .timeline__wrapper 中。从 .timeline__container 中删除了 position: relative;。 并将 position: relative; 添加到 .timeline__wrapper。

代码上的注释已经足够了，所以当你通过这个时，你应该能够理解。您可以研究此处使用的网格属性以实际了解这是如何完成的。

我还在时间轴上/下类上添加了一点填充，以忽略与连接器(或灰线)的视觉冲突

随意添加/删除列表项，以便时间轴项的高度增加/减少，您可以检查这是否符合预期。

差点忘了说，这在 safari 上也能正常工作。

最后的片段:

* {
  /* you can ignore the pseudo elements here */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline__wrapper {
  position: relative;
  /* to fix the timeline connector */
}

.timeline__container {
  background: #c0ffee;
  overflow-x: auto;
  /* element with an overflow can't display an absolute positioned element, that's why the wrapper up there */
  display: flex;
}

.timeline__connector {
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  background: #ccc;
}

.timeline__item {
  background: gold;
  min-width: 85px;
  justify-content: center;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  /* this keeps the upper and lower portion same height */
}

.timeline__item:nth-child(2n) .timeline__down {
  /* these styles reverses the expected rows */
  grid-row-start: 2;
  grid-row-end: 1;
}

.timeline__up {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.timeline__item:nth-child(2n) .timeline__up {
  align-items: flex-start;
}

.timeline__down {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.timeline__month {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: inline-block;
}

.timeline__month-up {
  margin-bottom: 20px;
  align-self: flex-end;
}

.timeline__month-down {
  align-self: flex-start;
  margin-top: 20px;
}

.timeline__count {
  margin: auto;
}

.timeline__count-up {
  margin-bottom: 20px;
}

.timeline__count-down {
  margin-top: 20px;
}

.timeline__item-event {
  min-width: 180px;
}

.timeline__event__list ul {
  margin-left: 20px;
}
<div class="timeline__wrapper">
  <div class="timeline__container">
    <div class="timeline__connector"></div>
    <div class="timeline__item">
      <div class="timeline__up">
        <div class="timeline__month timeline__month-down">JAN</div>
      </div>
      <div class="timeline__down">
        <div class="timeline__count timeline__count-up">5</div>
      </div>
    </div>
    <div class="timeline__item">
      <div class="timeline__up">
        <div class="timeline__month timeline__month-up">FEB</div>
      </div>
      <div class="timeline__down">
        <div class="timeline__count timeline__count-down">15</div>
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">5th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>inventore nihil sint est.</li>
            <li>Lorem ipsum dolor sit</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
        <!--       <div class="timeline__count timeline__count-up">5</div> -->
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">15th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>inventore nihil sint est.</li>
            <li>Lorem ipsum dolor sit</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">

      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
  </div>
</div>

更新:根据评论向 View 添加了更多元素。

关于html - 无法在 div 上应用动态高度 - 时间轴 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55706222/

上一篇：python - 如何将 HTML 代码集成到 Python 脚本中？

下一篇：javascript - 当脚本是从加载的脚本动态创建的 DOM 节点时，脚本 onload 和 window.onload 的顺序是否定义明确？

相关文章：

javascript - 如何在提供电话号码时在特定数字之间添加空格

javascript - 在 WEB 应用程序中隐藏已选定选项卡的超链接按钮

css - 线性渐变不匹配它所属的元素

html - 与 Flexbox 相同的宽度

javascript - 用 Flexbox 将内联 ul 并排包装起来

java - 需要统一的浏览器引擎

html - 表单评估为空所需输入时如何控制父元素边框颜色？

html - 使 flex-box 中 child 的高度相同

javascript - 使 div 可点击和可复制？

jquery - 仅使用 CSS 制作箭头动画

©2024 IT工具网  联系我们