Как можно исправить отображение макета для текстов разной длины?
Пытаюсь исправить отображение блоков в timeline. Как видно по "Уроку 1" и "Уроку 2" , в теге при указании текста разной длины ломается макет. На малых экранах выглядит нормально, а на больших происходит смещение. При этом в уроках 3 и 4 с использованием их объёма текста выглядит нормально. Код: jsfiddle.net
Вот как это выглядит на больших экранах с разной длиной "description":
a{text-decoration:none}
h4{text-align:center;margin:30px 0;color:#444}
.main-timeline{position:relative}
.main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:#242922;position:absolute;top:0;left:0;right:0}
.main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative}
.main-timeline .timeline:before{content:"";width:20px;height:20px;border-radius:50%;border:4px solid #fff;background:#ec496e;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}
.main-timeline .timeline-icon{display:inline-block;width:130px;height:130px;border-radius:50%;border:3px solid #ec496e;padding:13px;text-align:center;position:absolute;top:50%;left:30%;transform:translateY(-50%)}
.main-timeline .timeline-icon i{display:block;border-radius:50%;background:#ec496e;font-size:64px;color:#fff;line-height:100px;z-index:1;position:relative}
.main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before{content:"";width:100px;height:4px;background:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)}
.main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;top:89px;right:-30px}
.main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative}
.main-timeline .timeline-content:before{content:"";width:70%;height:100%;border:3px solid #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px}
.main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0}
.main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px}
.main-timeline .description{display:inline-block;font-size:16px;color:#404040;line-height:20px;letter-spacing:1px;margin:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px}
.main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:left}
.main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)}
.main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0}
.main-timeline .timeline:nth-child(2n) .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-icon i,.main-timeline .timeline:nth-child(2n) .timeline-icon:before,.main-timeline .timeline:nth-child(2n):before{background:#f9850f}
.main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f}
.main-timeline .timeline:nth-child(2n) .title{color:#f9850f}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f}
.main-timeline .timeline:nth-child(3n) .timeline-content:after,.main-timeline .timeline:nth-child(3n) .timeline-icon i,.main-timeline .timeline:nth-child(3n) .timeline-icon:before,.main-timeline .timeline:nth-child(3n):before{background:#8fb800}
.main-timeline .timeline:nth-child(3n) .timeline-icon{border-color:#8fb800}
.main-timeline .timeline:nth-child(3n) .title{color:#8fb800}
.main-timeline .timeline:nth-child(3n) .timeline-content:before{border-left-color:#8fb800;border-bottom-color:#8fb800}
.main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#2fcea5}
.main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#2fcea5}
.main-timeline .timeline:nth-child(4n) .title{color:#2fcea5}
.main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#2fcea5;border-bottom-color:#2fcea5}
@media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px}
.main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px}
.main-timeline .timeline-content{margin-top:75px}
}
@media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px}
.main-timeline .timeline-icon{left:25%}
.main-timeline .timeline:nth-child(even) .timeline-icon{right:25%}
.main-timeline .timeline-content{margin-top:115px}
}
@media only screen and (max-width:767px){.main-timeline{padding-top:50px}
.main-timeline:before{left:80px;right:0;margin:0}
.main-timeline .timeline{margin-bottom:70px}
.main-timeline .timeline:before{top:0;left:83px;right:0;margin:0}
.main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0}
.main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto}
.main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px}
.main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px}
.main-timeline .timeline-icon i{font-size:30px;line-height:45px}
.main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px}
.main-timeline .timeline:nth-child(even) .timeline-content{float:right}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px}
.main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px}
}
@media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px}
.main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px}
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<a href="#" class="timeline">
<div class="timeline-icon"><i class="fa fa-globe"></i></div>
<div class="timeline-content">
<h3 class="title">Урок 1</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</a>
<a href="#" class="timeline">
<div class="timeline-icon"><i class="fa fa-globe"></i></div>
<div class="timeline-content">
<h3 class="title">Урок 2</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod!
</p>
</div>
</a>
<a href="#" class="timeline">
<div class="timeline-icon"><i class="fa fa-globe"></i></div>
<div class="timeline-content">
<h3 class="title">Урок 3</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
</p>
</div>
</a>
<a href="#" class="timeline">
<div class="timeline-icon"><i class="fa fa-globe"></i></div>
<div class="timeline-content">
<h3 class="title">Урок 4</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>Подскажите пожалуйста, как можно исправить отображение макета для текстов разной длины в ? Заранее благодарю!
Ответы (1 шт):
Автор решения: Айболит
→ Ссылка
Попробовал собрать ваш таймлайн - использовал SVG для этой иконки и javascript что бы вставить svg в разметку в class="icon"
Что бы 100 раз не перерисовывать полоску с иконкой я просто весь блок отразил по оси X а текст перевернул обратно
Как видно в моём примере использовано разное количество текста
Если что то не ясно переспросите - я постараюсь ответить комментарием если не буду занят
let set = `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="m165.75 170.28a96.243 96.243 0 0 1-122.55 7.4158 96.243 96.243 0 0 1-30.123-119.02 96.243 96.243 0 0 1 111.32-51.775 96.243 96.243 0 0 1 71.614 99.724m-172.46 15.005c53.245 16.673 104.78 19.53 153.06-3.9474m-154.35-23.884c53.118-23.393 106.38-27.824 155.43-5.5223m-91.478-65.602c-18.064 53.655-22.421 106.03-0.65095 155.96m29.535-155.29c21.584 54.41 24.79 106.52 1.3012 155.29m62.735-78.63c0 44.146-35.432 79.933-79.14 79.933-43.708 0-79.14-35.787-79.14-79.933 0-44.146 35.432-79.933 79.14-79.933 43.708-1e-6 79.14 35.787 79.14 79.933z" fill="none" stroke-width="7.5"/>
</svg>`;
document.querySelectorAll(".icon").forEach(function(icon) {
icon.innerHTML = set;
});* {
box-sizing: border-box;
margin: 0;
}
.icon {
width: 50px;
}
.icon svg {
width: 50px;
}
.set:nth-of-type(1) .icon {
stroke: red;
}
.set:nth-of-type(2) .icon {
stroke: orange;
}
.set:nth-of-type(3) .icon {
stroke: blue;
}
.set:nth-of-type(4) .icon {
stroke: green;
}
.set {
display: flex;
}
.pointer {
width: 200px;
border-left: 2px solid red;
border-bottom: 2px solid red;
margin-left: 100px;
margin-top: 25px;
position: relative;
padding: 10px;
}
.pointer:after {
content: "";
width: 100px;
height: 2px;
background: red;
position: absolute;
top: 0;
left: -100px;
}
.pointer:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
border: 2px solid #fff;
position: absolute;
top: 1px;
left: -60px;
transform: translate(0, -50%);
z-index: 1;
}
.sets {
position: relative;
width: 500px;
margin: auto;
overflow: hidden;
}
.sets:after {
content: "";
position: absolute;
left: 248px;
height: 100%;
top: 0;
width: 2px;
background: red;
}
.set:nth-of-type(1) {
margin-left: 150px;
}
.set:nth-of-type(2),
.set:nth-of-type(4) {
transform: scaleX(-1) translateX(152px);
margin-top: 30px;
}
.set:nth-of-type(3) {
margin-top: 30px;
margin-left: 150px;
}
.set:nth-of-type(2) p,
.set:nth-of-type(4) p {
transform: scaleX(-1);
}<div class="sets">
<div class="set">
<div class="icon"></div>
<div class="pointer">
<p>Урок 1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam necessitatibus quibusdam aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi esse libero praesentium quisquam totam ex officia quae dolores facilis illo?</p>
</div>
</div>
<div class="set">
<div class="icon"></div>
<div class="pointer">
<p>Урок 1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam necessitatibus quibusdam aliquid.</p>
</div>
</div>
<div class="set">
<div class="icon"></div>
<div class="pointer">
<p>Урок 1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="set">
<div class="icon"></div>
<div class="pointer">
<p>Урок 1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam necessitatibus quibusdam aliquid. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex, ea! </p>
</div>
</div>
</div>