Пример:
Заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.
Заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.
Заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.
Для иконок в данном примере используется шрифт Font Awesome, но при желании можно использовать другой шрифт, символ, графику или svg-иконку.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="timeline"> <div class="timeline-item"> <div class="timeline-icon"> <i class="fa fa-graduation-cap"></i> </div> <div class="timeline-content"> <h4>Заголовок</h4> <p>Текст события.</p> </div> </div> <!-- Еще события --> <div class="timeline-item"> <div class="timeline-icon"> <i class="fa fa-graduation-cap"></i> </div> <div class="timeline-content"> <h4>Заголовок</h4> <p>Текст события.</p> </div> </div> </div> |
Все блоки событий timeline-item идентичны и показываются по разные стороны с помощью псевдокласса :nth-child
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
#timeline *, #timeline *:before, #timeline *:after { box-sizing: border-box; } #timeline .timeline-item:after, #timeline .timeline-item:before { content: ''; display: block; width: 100%; clear: both; } #timeline { max-width: 1100px; width: 100%; margin: 30px auto; position: relative; padding: 0 10px; transition: all 0.4s ease; } #timeline:before { content: ""; width: 3px; height: 100%; background: #337AB7; left: 50%; top: 0; position: absolute; } #timeline:after { content: ""; clear: both; display: table; width: 100%; } #timeline .timeline-item { margin-bottom: 50px; position: relative; } #timeline .timeline-item .timeline-icon { background: #337AB7; color: #FFF; text-align: center; font-size: 24px; line-height: 50px; width: 50px; height: 50px; position: absolute; top: 0; left: 50%; overflow: hidden; margin-left: -23px; border-radius: 50%; } #timeline .timeline-item .timeline-icon i { line-height: 50px; } #timeline .timeline-item .timeline-content { width: 45%; background: #fff; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 10px rgba(0,0,0,0.2); border-radius: 5px; transition: all 0.3s ease; } #timeline .timeline-item .timeline-content h4 { padding: 15px; background: #337AB7; color: #fff; margin: -20px -20px 10px -20px; font-weight: 300; border-radius: 3px 3px 0 0; } #timeline .timeline-item .timeline-content:before { content: ''; position: absolute; left: 45%; top: 20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #337AB7; } #timeline .timeline-item:nth-child(even) .timeline-content { float: right; } #timeline .timeline-item:nth-child(even) .timeline-content:before { content: ''; right: 45%; left: inherit; border-left: 0; border-right: 7px solid #337AB7; } @media screen and (max-width: 768px) { #timeline { margin: 30px; padding: 0px; width: 90%; } #timeline:before { left: 0; } #timeline .timeline-item .timeline-content { width: 90%; float: right; } #timeline .timeline-item .timeline-content:before, #timeline .timeline-item:nth-child(even) .timeline-content:before { left: 10%; margin-left: -6px; border-left: 0; border-right: 7px solid #337AB7; } #timeline .timeline-item .timeline-icon { left: 0; } } |
Для просмотра мобильного варианта, когда блоки находятся друг под другом, сузьте окно браузера.
За основу взят код, найденный на codepen.io у пользователя Bruno Rodrigues
Все отлично. Правда заголовки я реализовал, через тег <P>. И на андроиде юраузера все нормально отрабатывают, а Опера, просто в виде <UL> маркированного списка