так, как говорится в заголовке, я пытаюсь выровнять маркеры, чтобы выровнять их по центру вертикальной серой линии.Я начинающий с css и не уверен на 100%, как работает calc (), даже если вы успешно внедрили его в других местах.Это правильный подход, чтобы сделать мои выравнивания?Использование медиа-запроса было бы слишком много, так как слишком много точек останова, и изменение HTML не является вариантом для дизайна.Одна из функций cal (), которую я успешно использовал, была такой:
left: calc ((100% - 3 * 11rem) * .54 - 4px)! Важный;
поэтому я подумал, что могу использовать ту же формулу, затем изменять значения до выравнивания серой линии.Кажется, эта мысль была ошибочной
Желаемый вид
Текущий вид
Вот мой код:
html {
font-size: 18px;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.project-methodology-wrap {
padding: 5rem 0;
/*========== Media queries ==========*/
}
.project-methodology-wrap .methodologyBullet::before {
content: '';
width: 25px;
height: 25px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 26px;
top: 0px;
opacity: 0;
}
.project-methodology-wrap .methodologyBullet::after {
content: '';
width: 12px;
height: 12px;
background: #d4272e;
position: absolute;
border-radius: 30px;
left: 33px;
top: 2px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::before {
opacity: 1;
transition-duration: 0.5s;
left: 26px;
}
.project-methodology-wrap .project-methodology-list.active .methodologyBullet::after {
border: 5px solid #fff;
width: 21px;
height: 21px;
left: 28px;
}
.project-methodology-wrap .project-methodology-listCount, .project-methodology-wrap .methodologyBullet {
position: absolute;
left: 0;
}
.project-methodology-wrap .project-methodology-leftContent {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.project-methodology-wrap .project-methodology-rightContent {
position: relative;
overflow: hidden;
}
.project-methodology-wrap .project-methodology-rightContent:before {
content: "";
height: 100%;
width: 8px;
position: absolute;
background-color: #f1f2f6;
left: calc((100% - 3 * 5rem) * .54 - -2px)!important
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list {
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
padding-left: 80px;
margin-bottom: 3rem;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list .project-methodology-listContent {
opacity: 0.2;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
}
.project-methodology-wrap .project-methodology-rightContent .project-methodology-list.active .project-methodology-listContent {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="project-methodology-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="project-methodology-leftContent">
<div class="pr-5">
<h2>title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, eum deserunt perferendis asperiores esse temporibus est numquam repellat doloremque suscipit enim quod nisi nam cum ea quam expedita quidem velit.
</p>
</div>
<img class="img-fluid pt-5 pb-5 pr-5" src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="project-methodology-rightContent pt-5">
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">1</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">2</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
<div class="project-methodology-list">
<div class="methodologyBullet"> </div>
<div class="project-methodology-listContent">
<h4 class="project-methodology-listCount">3</h4>
<h4>
Title
</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, enim nam! Quisquam aliquid, harum reiciendis deleniti minima natus veniam. Fuga sunt rerum adipisci at et ad repellendus sint velit ducimus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>