javascript - 垂直边框左侧的间距

Question

当前示例使用伪类为主标题和副标题绘制一 strip 有小元素的线。每个具有 line 类的元素都需要在左侧有一条线。

问题:我必须将高度增加到 200% 才能使其正常工作。当内容增加时，这条线会比它应该延伸的更远。

内容越多，时间线越长:https://jsfiddle.net/ss189uva/

是否有可能通过 jquery 实现这个？因为这需要足够灵活以承受内容区域并自动调整。

原始示例:

p {
  margin: 0;
  padding: 0;
}
.view-timeline-block {
  padding: 0 5em;
  line-height: 28px;
}
.view-timeline-block .ml-container {
  padding-left: 25px;
}
.view-timeline-block .line {
  position: relative;
}
.view-timeline-block .line:after {
  background: black none repeat scroll 0 0;
  content: "";
  height: 200%;
  left: -19px;
  position: absolute;
  top: -15px;
  width: 5px;
}
.view-timeline-block .active {
  position: relative;
}
.view-timeline-block .active:after {
  background-color: white;
  border: 5px solid black;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: -25px;
  position: absolute;
  top: 6px;
  width: 8px;
  z-index: 100;
}
.view-timeline-block .active-small {
  position: relative;
}
.view-timeline-block .active-small:after {
  background: black none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 12px;
  left: -23px;
  position: absolute;
  top: 9px;
  width: 12px;
}

<div class="view-timeline-block">
  <div class="main-listing">
    <div class="title active">Testing name</div>
    <div class="content line">
      <p>testing name content</p>
    </div>
    <div class="sub_name active-small">asdasdasdasd</div>
    <div class="sub_content line">
      <p>testing sub name content</p>
    </div>
  </div>
  <div class="main-listing">
    <div class="title active">Timeline 2 name</div>
    <div class="content line">
      <p>timeline 2 content</p>
    </div>
    <div class="sub_name active-small">Timeline 2 sub name</div>
    <div class="sub_content ">
      <p>timeline 2 sub content</p>
    </div>
  </div>
</div>

Answer 1

只需完全省略 height 并为您要设置的维度指定至少两 (2) 个相反的位置属性:https://jsfiddle.net/ss189uva/2/

.view-timeline-block .line:after {
    background: black none repeat scroll 0 0;
    content: "";
    left: -19px;
    position: absolute;
    top: -15px;
    bottom: -15px;
    width: 5px;
}

这是利用了这样一个事实，即如果指定了足够多的属性，则可以为绝对定位元素赋予维度:

来自 MDN's documentation for position :

Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.

通过指定 top: -15px; 和 bottom: -15px; 并将 height 保留为 auto，您要确保伪造的顶部距顶部 -15px 并且伪造的底部距底部 -15px；元素的高度为 15px。