Как создать гибкую вертикальную линию между двумя элементами?

Question

Как мне создать линию между двумя div, которая автоматически регулирует ее высоту в зависимости от расстояния между ним и следующим div?В настоящее время это выглядит нормально, когда div - это только одна строка, но когда высота div изменяется в зависимости от содержимого, тогда строка разрывается.

В настоящее время у меня есть этот код:

.icon {
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

.icon:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 40px;
    top: 58px;
    left: 23px;
    border-left: 2px dashed #CCC;
}   

Answer 1

добавить переполнение: скрыто для дел.и увеличьте высоту линии.

.icon:after {
   height:1000px;
}

div{
   overflow:hidden;
}

Надеюсь, это вам поможет.

Answer 2

Проверьте ниже фрагмент кода

  
/* Base */
  

 body{
     background:#252827;
   }
#content {
  margin-top: 50px;
  text-align: center;
}
/* Timeline */
.timeline {
  border-left: 4px solid #004ffc;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Chivo', sans-serif;
  margin: 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 50px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}
.timeline h1 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 100;
  font-size: 1.4em;
}
.timeline h2,
.timeline h3 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 400;
  font-size: 1.4em;
}
.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  margin-bottom: 50px;
  position: relative;
}
.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}
.timeline .event:before {
  left: -217.5px;
  color: rgba(255, 255, 255, 0.4);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
  font-family: 'Saira', sans-serif;
}
.timeline .event:after {
  box-shadow: 0 0 0 4px #004ffc;
  left: -57.85px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 50%;
}

<div id="content">
 
  <ul class="timeline">
    <li class="event" >
      <h3>Dinosaurs Roamed the Earth</h3>
      <p>RAWWWWWWRRR.</p>
    </li>
    <li class="event" >
      <h3>Creative Component Launched</h3>
      <p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>    
    </li>
    <li class="event">
      <h3>Squareflair was Born</h3>
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p> <p>Get ready!</p>    
    </li>
    <li class="event" >
      <h3>Squareflair Today</h3>
      <p>Our success can be measured by lives changed and enhanced by more than eight years of Squarespace-focused service.</p>    
    </li>
  </ul>
</div>

Answer 3

Я на самом деле всего пару дней реализовал что-то подобное на https://designsystemmeetup.com/v1.0.0/

Сокращенная реализация здесь: https://codepen.io/dominikwilkowski/pen/KxjPGg

Обратите внимание, что в моей реализации изображение установлено сверху, а несредний ...

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  padding-left: 4.8rem;
  padding-bottom: 1.5rem;
}

li:after {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  border-left: 3px solid #cccccc;
  left: 1.75rem;
  top: 0;
  z-index: 1;
}

img {
  position: absolute;
  left: 0.2rem;
  top: 0;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  z-index: 2;
}

<ul>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga
      inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident,
      ipsam. Praesentium commodi, laboriosam ex aperiam.
    </p>
  </li>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline 2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos!
    </p>
  </li>
  <li>
    <img src="https://via.placeholder.com/100x100">
    <h2>Headline 3</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit numquam quidem iusto est eos hic impedit ex odit
      maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus harum et, cumque illum in, fuga
      inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo, eaque tempora. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit molestiae quod possimus aliquam. Provident,
      ipsam. Praesentium commodi, laboriosam ex aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea iure alias, vitae a vel fugit
      numquam quidem iusto est eos hic impedit ex odit maiores. Sequi earum aspernatur, dignissimos! Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Repellendus harum et, cumque illum in, fuga inventore quo dolore alias atque natus nesciunt, excepturi ducimus ullam laborum. Ratione explicabo,
      eaque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, saepe ratione illo, ab deleniti ex, eius similique soluta impedit
      molestiae quod possimus aliquam. Provident, ipsam. Praesentium commodi, laboriosam ex aperiam.
    </p>
  </li>
</ul>