Question

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

我想要达到什么目标？

我想要垂直对齐的线

＆＃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 {
  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;
}

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

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

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

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

＆＃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: -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;
}

＆＃13;

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

＆＃13;

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

伪背景的时间轴间距问题

1 个答案: