html - 伪背景的时间线间距问题

Question

我有一个基线行高，我不想为网站的这一部分修改，但正如您在下面的示例中看到的，每个元素之间都有空格。

我想实现什么？

我想要垂直对齐的线

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 {
  content: '';
  position: absolute;
  left: -19px;
  top: 0;
  width: 5px;
  height: 100%;
  background: black;
}

.view-timeline-block .active {
  position: relative;
}

.view-timeline-block .active:after {
  content: '';
  position: absolute;
  left: -25px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 5px solid black;
}

.view-timeline-block .active-small {
  position: relative;
}

.view-timeline-block .active-small:after {
  content: '';
  position: absolute;
  left: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
}

<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

做了一些细微的修改 - 也许你可以试一试。

我改变了线条的位置。为了避免它们与圆圈重叠，我为这些圆圈添加了背景并赋予它们更高的 z-index。

最后但同样重要的是，我更改了圆圈/点的大小，使它们更加居中。

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: -webkit-calc(100% + 25px);
  height: -moz-calc(100% + 25px);
  height: -o-calc(100% + 25px);
  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;
  z-index: 150;
}

<div class="view-timeline-block">
  <div class="main-listing">
    <div class="title active">Testing name</div>
    <div class="content line">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
        pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
        facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.</p>
    </div>
    <div class="sub_name active-small">asdasdasdasd</div>
    <div class="sub_content line">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
        pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
        facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.

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

更新:我将 height: 200% 替换为 height:-webkit-calc(100% + 25px); 和其他一些特定于浏览器的高度计算。应该适用于所有现代浏览器。