Question

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

问题：我必须将高度增加到200%才能使其正常工作。当内容增加时，该行进一步延伸。

内容一增加，时间轴就会进一步延伸：https://jsfiddle.net/ss189uva/

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

原始示例：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;
}

如果指定了足够的属性，则可以利用absolute定位元素的维度：

来自MDN's documentation for position：

大多数情况下，绝对定位的元素具有auto和height的{{1}}值，以计算元素的内容。但是，可以通过指定width和auto以及top未指定（bottom以外的height来填充可用空间的未替换绝对定位元素是，auto）。同样适用于left，right和width。

通过指定top: -15px;和bottom: -15px;并将height保留为auto，您可以确保伪的顶部为-15px顶部，伪底部是-15px从底部开始;元素的高度给出或取15px。

左侧垂直边框的间距

1 个答案: