搜索
搜索

使用CSS calc（）对齐伪元素以在所有屏幕上工作

jsPlayer 发表于 Dev
16
jsPlayer

因此，就像标题中所说的那样，我正在尝试将项目符号对齐以在垂直灰线的中心对齐。我是CSS的初学者，即使我在其他地方成功实现了该方法，也不能100％地确定calc（）如何工作。这是进行对齐的正确方法吗？由于断点太多，因此无法使用媒体查询，并且每个设计都不能更改html。我成功使用的cal（）函数之一是：

左：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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

马里奥

看起来在这种情况下您可以使用固定值，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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

插入＆times; 使用CSS伪元素

使用CSS分组元素

使用jQuery禁用除表单中的某些元素以外的所有输入元素

在:: before伪元素上使用CSS过渡

使用calc（）的CSS操作

使用CSS以相同方式对齐元素

CSS选择器在所有框（第一个和最后一个）中添加一个before伪元素？

CSS伪元素扩展到所有屏幕尺寸的整个页面宽度

在所有工作表中使用宏

仅使用伪元素创建CSS徽章

jQuery验证不适用于每个类。它同时在所有元素上工作

如何使用CSS在所有浏览器中垂直居中放置一个“ div”元素？

使用CSS对齐图像

使用jQuery修改：after伪元素的CSS

“ background-size：” css样式在所有浏览器（CSS）中均可工作吗？

CSS：使用伪元素后禁用<a>标记

我如何使用jQuery获取除最后一个元素以外的所有元素

使用jQuery更新伪元素的CSS

HTML和CSS在所有屏幕尺寸上垂直对齐正文位置

使用JQuery修改伪元素的CSS

CSS MDL：垂直对齐所有列表元素的结果

使用伪元素的 CSS 边框问题

使用css对齐动态生成的元素

如何在所有设备上“左居中”对齐内容以保持对 css 的响应能力？

CSS 伪元素 ::before 无法正常工作

使用 CSS 对齐图像

css对齐元素以在它们之间具有相同的空间

如何在 laravel 中使用 form::date 在所有浏览器上工作

Css、Html：为什么 chrome 忽略容器宽度？（在所有其他浏览器上工作正常）

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  5. 5

    Modbus Python施耐德PM5300

  6. 6

    为什么Object.hashCode（）不遵循Java代码约定

  7. 7

    如何检查字符串输入的格式

  8. 8

    检查嵌套列表中的长度是否相同

  9. 9

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  10. 10

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

  11. 11

    如何正确比较 scala.xml 节点？

  12. 12

    在令牌内联程序集错误之前预期为 ')'

  13. 13

    如何在JavaScript中获取数组的第n个元素？

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    如何监视应用程序而不是单个进程的CPU使用率？

  17. 17

    解决类Koin的实例时出错

  18. 18

    ES5的代理替代

  19. 19

    有什么解决方案可以将android设备用作Cast Receiver？

  20. 20

    VBA 自动化错误：-2147221080 (800401a8)

  21. 21

    套接字无法检测到断开连接

热门标签

归档