Как правильно верстается такая хронологическая шкала?

Question

Линия должна быть адаптивной, каждый отрезок зависит от блока с текстом справа или слева и при уменьшении разрешения этот отрезок должен вытягиваться в соответствии с ним. Какие есть варианты решения?

Answer 1

по идее тут 2 блока (левый и правый)

у каждого по 3 подблока

* {
  box-sizing:  border-box;
}

.block {
  position: relative;
  width:    50%;
  padding:  10px;
}

.block.left {
  border-right:   5px solid #3d4bb6;
  padding-right:  70px;
}

.block.right {
  margin-left:    calc(50% - 5px);
  border-left:    5px solid #3d4bb6;
  padding-left:   70px;
}

.index { 
  position:       absolute;
  top:            -15px;

  width:          30px;
  height:         30px;
  
  color:          #087823;
  background:     white;

  border:         2px solid #3d4bb6;
  border-radius:  15px;
  
  line-height:    26px;
  text-align:     center;
  
  font-size:      24px;
  font-weight:    bold;
  font-weight:    Calibri;
}

.block.left .index {
  right:          calc(-15px - 2px);
}

.block.right .index {
  left:          calc(-15px - 2px);
}

.title {
  position:       relative;

  width:          100%;
  margin-bottom:  20px;
  
  font-weight:    bold;
}

.left .title {
  text-align:     right;
}

.title:after {
  content: "";
  
  display:  inline-block;
  
  position: absolute;
  top:      20px;
  
  width:    20px;
  height:   2px;
  
  background: #087823;
}

.left .title:after {
  right:    0px;
}

.right .title:after {
  left:    0px;
}

.right .title {
  text-align:     left;
}

.content {
  text-align:     justify;
}

<br>
<div class = 'block left'>
    <div class = 'index'>1</div>
    <div class = 'title'>Принцип действия</div>
    <div class = 'content'>Действие ядерного оружия основано на использовании энергии взрыва ядерного взрывного устройства, высвобождающейся в результате неуправляемой лавинообразно протекающей цепной реакции деления тяжёлых ядер и/или реакции термоядерного синтеза.</div>
</div>
<div class = 'block right'>
    <div class = 'index'>2</div>
    <div class = 'title'>Ядерные устройства</div>
    <div class = 'content'>Существует ряд веществ, способных привести к цепной реакции деления. В ядерном оружии используются уран-235 или плутоний-239. Уран в природе встречается в виде смеси трёх изотопов: 238U (99,2745 % природного урана), 235U (0,72 %) и 234U (0,0055 %). Цепную ядерную реакцию поддерживает только изотоп 235U. Для обеспечения максимального энерговыхода урановой ядерной бомбы содержание 235U в нём должно быть не менее 80 %. Поэтому при производстве оружейного урана для повышения доли 235U выполняют обогащение урана.</div>
</div>

Answer 2

Это немного не то, что хотели вы. Сверстано не очень аккуратно, но всю работу за вас сделать никто не будет.

body {  
  margin: 0;
  padding: 0;
  background: rgb(230,230,230);
  
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}
  
/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li span.number {
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index:20;
  font-size: small;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}



.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(80,80,255);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  pointer-events: none;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  
<!-- The Timeline -->

<ul class="timeline">

    <!-- Item 1 -->
    <li>
    <span class="number">1</span>
        <div class="direction-r">
            <div class="flag-wrapper">
                <span class="flag">Freelancer</span>
            </div>
            <div class="desc">My current employment. Way better than the position before!</div>
        </div>
    </li>
  
    <!-- Item 2 -->
    <li>
      <span class="number">2</span>
        <div class="direction-l">
            <div class="flag-wrapper">
                <span class="flag">Apple Inc.</span>
            </div>
            <div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
        </div>
    </li>

    <!-- Item 3 -->
    <li>
      <span class="number">3</span>
        <div class="direction-r">
            <div class="flag-wrapper">
                <span class="flag">Harvard University</span>
            </div>
            <div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
        </div>
    </li>
  
</ul>

БЛОГ НА HUSL

Как правильно верстается такая хронологическая шкала?

Ответы (2 шт):