使用Css calc()对齐伪元素以工作所有屏幕
使用Css calc()对齐伪元素以工作所有屏幕
提问于 2019-03-19 19:21:55
所以就像标题说的，我试图对齐子弹，使之在垂直灰色线的中心对齐。我是css的初学者，甚至不能100%确定calc()是如何工作的-我已经在其他地方成功地实现了你。这是正确的方法来做我的定位吗？使用媒体查询会太多，因为有太多的断点，而更改html并不是每个设计的选项。我成功使用的cal()函数之一是：
左:calc(100%-3*11 left)* .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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-19 19:56:40
在这种情况下，您可以使用一个固定的值left: 35px;，因为元素在点左边的比例没有变化。
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: 35px;
}
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55248582
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号