![circled]( "circled")
本文介绍了元素对齐有点偏离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使元素的两个角对齐，以便它们正好位于另一个元素的角的顶部.
换句话说，我希望将元素的角与另一个元素的角匹配.
这是代码:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');.blogmaster {显示:弹性；边距顶部:0；底边距:0；}.container1 {显示:弹性；flex-wrap: 包裹;填充:20px；对齐内容:居中；溢出:隐藏；最大宽度:100%；}.正方形 {位置:相对；对齐内容:居中；边距顶部:0；底边距:0；宽度:460px；最大宽度:100%！重要；高度:100%！重要；背景:白色；边框半径:4px；框阴影:0px 5px 20px #D9DBDF;-webkit-transition:所有 0.3 秒轻松；-o-transition:所有 0.3 秒轻松；过渡:所有 0.3s 缓和；}.square:悬停{-webkit-transform: 翻译 (20px, -10px);-ms-transform: 翻译 (10px, -10px);变换:翻译(10px，-10px)；-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);}.square1:悬停{-webkit-transform: 翻译 (20px, -10px);-ms-transform: 翻译 (10px, -10px);变换:翻译(10px，-10px)；-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);}.square .square-image img{宽度:100%；高度:220px；适合对象:覆盖；边框左上角半径:4px；边框右上角半径:4px；边框:5px 实心 #555；}.square1 .square-image1 img{宽度:100%；高度:220px；适合对象:覆盖；边框左上角半径:4px；边框右上角半径:4px；边框:5px 实心 #555；}.square .square-details{填充:20px 30px 30px；}.square1 .square-details1{填充:20px 30px 30px；}.h11 {保证金:自动；文本对齐:左；字体系列:'Merriweather'，衬线；字体大小:24px；}p0{文本对齐:对齐；font-family: 'Open Sans', sans-serif;字体大小:12px；颜色:#C8C8C8；行高:18px；边距顶部:10px；显示:块；}.button56 {背景色:#0563bb；白颜色;宽度:100px；填充:10px 18px；边框半径:3px；文本对齐:居中；文字装饰:无；显示:块；字体大小:12px；边距顶部:18px；底边距:0；光标:指针；字体系列:'merriweather';}.button56:悬停{不透明度:0.9；白颜色;}.parent-div {显示:弹性；flex-wrap: nowrap;对齐内容:居中；}@media 屏幕和(最大宽度:480px){.parent-div {弹性方向:列；}}@media 屏幕和(最大宽度:480px){.正方形{底边距:0；右边距:0；左边距:0；边距顶部:0；}}@media 屏幕和(最大宽度:480px){.square .square-image img{高度:230px！重要；边框:5px 实心 #555；}}.square1 {对齐内容:居中；位置:相对；边距顶部:0；底边距:0；宽度:460px；最大宽度:100%！重要；高度:100%！重要；背景:白色；边框半径:4px；框阴影:0px 5px 20px #D9DBDF;-webkit-transition:所有 0.3 秒轻松；-o-transition:所有 0.3 秒轻松；过渡:所有 0.3s 缓和；}@media 屏幕和(最大宽度:480px){.square1{底边距:0；右边距:0；左边距:0；边距顶部:54px；}}@media 屏幕和(最大宽度:480px){.square1 .square-image1 img{高度:230px！重要；边框:5px 实心 #555；}}
<div class="container1"><div class="square"><div class="square-image"><img src="assets/img/Blog1.png">
<div class="square-details"><h3 class="h11">示例文本</h3><p0>这里有更多文字</p0><div><a href="#" target="_" class="button56">阅读更多</a></div>
<div class="square1"><div class="square-image1"><img src="assets/img/Blog2.png">
<div class="square-details1"><h3 class="h11">示例文本</h3><p0>示例文本放在这里</p0><div><a href="#" target="_" class="button56">阅读更多</a></div>
所以当你运行上面的代码时，在一个新页面上打开它，它看起来像这样:
这是在新页面中打开上述输出时的样子
在此处输入图片描述
然而，问题是我将上面的代码嵌入了一个网站，所以我的输出看起来像这样:
这是我的输出结果
在此处输入图片描述
我希望此元素的角与底部元素的角匹配，即 我正在处理的内容 两个框.
预期产出
在此处输入图片说明
我希望 red 中圈出的角正好是箭头所指的位置.以红色圈出的角应位于底部元素角的正上方.换句话说，我希望 red 中圈出的角正好是箭头所指的位置.
卡片应该从它们的位置移开，使角与底部元素的角相交.我只是不希望博客卡片的宽度被延长，以便角落相遇.我希望整个博客卡片从其位置移动，以便角落可以如预期输出所示相遇.这将在博客卡片之间创建一些空间，因为两张博客卡片都会从它们的位置移开，我对此很好.
如果您需要底部元素的 CSS 来了解其边距/对齐方式:
.master {显示:弹性；}.master div {宽度:98.6%；}@media all and (max-width: 500px) {.master div {宽度:99.9%；}}@media all and (max-width: 500px) {.master {flex-flow: wrap;}}@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{边距:0；填充:0；box-sizing: 边框框；字体系列:'Poppins'，无衬线；}身体20{高度:100%；地点项目:中心；背景:透明；}.技能栏{填充:25px 30px；背景:#fff;box-shadow: 5px 5px 20px rgba(0,0,0,0.2);边框半径:10px；}@media all and (max-width: 500px) {.技能栏{底边距:15px；}}.技能栏 .bar{边距:20px 0;}.skill-bars .bar:first-child{边距顶部:0px；}.skill-bars .bar .info{底边距:5px；}.skill-bars .bar .info span18{字体粗细:500；字体大小:17px；不透明度:0；动画:showText 0.5s 1s 线性向前；}@keyframes showText {100%{不透明度:1；}}.skill-bars .bar .progress-line{高度:10px；宽度:100%；背景:#f0f0f0；位置:相对；变换原点:左；边框半径:10px；box-shadow: 插入 0 1px 1px rgba(0,0,0,0.05),0 1px RGBA(255,255,255,0.8);动画:动画 1s 立方贝塞尔曲线 (1, 0, 0.5, 1) 向前；}@keyframes 动画 {100%{变换:scaleX(1);}}.bar .progress-line span18{高度:100%；位置:绝对；边框半径:10px；变换:scaleX(0);变换原点:左；背景:黑色；}/* 设置动画类以使其动画 */.bar .progress-line span18.animated{动画:动画 1s 立方贝塞尔曲线 (1, 0, 0.5, 1) 向前；}.bar .progress-line.html span18{宽度:84%；}.bar .progress-line.css span18{宽度:76%；}.bar .progress-line.jquery span18{宽度:91%；}.bar .progress-line.python span18{宽度:59%；}.bar .progress-line.mysql span18{宽度:70%；}/* 在此处添加动画，因此仅在视口中时才动画 */.progress-line span18.animated::before{位置:绝对；内容:《》；顶部:-10px；右:0；高度:0；宽度:0；边框:7px 实心透明；边框底部宽度:0px；边框右宽度:0px；边框顶部颜色:#000；不透明度:0；动画:showText2 0.5s 1.5s 线性向前；}.progress-line span18.animated::after{位置:绝对；顶部:-28px；右:0；字体粗细:500；背景:#000；颜色:#fff;填充:1px 8px；字体大小:12px；边框半径:3px；不透明度:0；动画:showText2 0.5s 1.5s 线性向前；}@keyframes showText2 {100%{不透明度:1；}}.progress-line.html span18::after{含量:84%"；}.progress-line.css span18::after{含量:76%"；}.progress-line.jquery span18::after{含量:91%"；}.progress-line.python span18::after{含量:59%"；}.progress-line.mysql span18::after{含量:70%"；}/* -----------------第二个盒子------------------------- */.skill-bars1 {填充:25px 30px；背景:#fff;box-shadow: 5px 5px 20px rgba(0,0,0,0.2);边框半径:10px；}@media all and (max-width: 500px) {.技能栏1{填充:25px 30px；}}.skill-bars1 .bar1 {边距:20px 0;}.skill-bars1 .bar1:first-child {边距顶部:0px；}.skill-bars1 .bar1 .info1 {底边距:5px；}.skill-bars1 .bar1 .info1 span19 {字体粗细:500；字体大小:17px；不透明度:0；动画:showText 0.5s 1s 线性向前；}@keyframes showText {100% {不透明度:1；}}.skill-bars1 .bar1 .progress-line1 {高度:10px；宽度:100%；背景:#f0f0f0；位置:相对；变换:scaleX(0);变换原点:左；边框半径:10px；box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);动画:动画 1s 立方贝塞尔曲线 (1, 0, 0.5, 1) 向前；}@keyframes 动画 {100% {变换:scaleX(1);}}.bar1 .progress-line1 span19 {高度:100%；位置:绝对；边框半径:10px；变换:scaleX(0);变换原点:左；背景:黑色；}.bar1 .progress-line1 span19.animated1{动画:动画 1s 立方贝塞尔曲线 (1, 0, 0.5, 1) 向前；}.bar1 .progress-line1.html1 span19 {宽度:61%；}.bar1 .progress-line1.css1 span19 {宽度:50%；}.bar1 .progress-line1.jquery1 span19 {宽度:68%；}.bar1 .progress-line1.python1 span19 {宽度:82%；}.bar1 .progress-line1.mysql1 span19 {宽度:98%；}.progress-line1 span19.animated::before {位置:绝对；内容:《》；顶部:-10px；右:0；高度:0；宽度:0；边框:7px 实心透明；边框底部宽度:0px；边框右宽度:0px；边框顶部颜色:#000；不透明度:0；动画:showText2 0.5s 1.5s 线性向前；}.progress-line1 span19.animated::after {位置:绝对；顶部:-28px；右:0；字体粗细:500；背景:#000；颜色:#fff;填充:1px 8px；字体大小:12px；边框半径:3px；不透明度:0；动画:showText2 0.5s 1.5s 线性向前；}@keyframes showText2 {100% {不透明度:1；}}.progress-line1.html1 span19::after {含量:61%"；}.progress-line1.css1 span19::after {含量:50%"；}.progress-line1.jquery1 span19::after {含量:68%"；}.progress-line1.python1 span19::after {含量:82%"；}.progress-line1.mysql1 span19::after {含量:98%"；}
HTML:
<div class="container";data-aos=淡入淡出"><div class="section-title"><h2>我在做什么</h2><div class="master"><div class="column1"><div class="row1"><div class="skill-bars"><div class="bar"><div class="info"><span18>哈佛CS50课程</span18>
<div class="progress-line html"><span18></span18>
<div class="bar"><div class="info"><span18>Youtube 频道(Java 教程)</span18>
<div class="progress-line css"><span18></span18>
<div class="bar"><div class="info"><span18>C++</span18>
<div class="progress-line jquery"><span18></span18>
<div class="bar"><div class="info"><span18>Java</span18>
<div class="progress-line python"><span18></span18>
<div class="bar"><div class="info"><span18>Web 开发(前端)</span18>
<div class="progress-line mysql"><span18></span18>
<!-- 第二个盒子--><div class="column1"><div class="row1"><div class="skill-bars1"><div class="bar1"><div class="info1"><span19>竞技国际象棋(学校俱乐部)</span19>
<div class="progress-line1 html1"><span19></span19>
<div class="bar1"><div class="info1"><span19>领英学习</span19>
<div class="progress-line1 css1"><span19></span19>
<div class="bar1"><div class="info1"><span19>GitHub 侧项目</span19>
<div class="progress-line1 jquery1"><span19></span19>
<div class="bar1"><div class="info1"><span19>计算机科学和数学辅导</span19>
<div class="progress-line1 python1"><span19></span19>
<div class="bar1"><div class="info1"><span19>阅读破解编程面试"😊</span19>
<div class="progress-line1 mysql1"><span19></span19>
</节>
我尝试了什么
我尝试添加一个主元素，就像它显示在底部元素的 CSS 中一样，并添加了相同的属性，但它仍然不起作用.
任何建议都会有很大帮助！
更新
在此处输入图片说明
这是我得到的输出，角仍然与底部元素的角不匹配.
解决方案
来自 CSS Grid 的一个解决方案.
.container {宽度:950px；边距:0 自动；}h1.section-header {font-family: arial, 'sans-serif';字体大小:25px；颜色:#333；文本对齐:居中；位置:相对；填充底部:15px}h1.section-header:之后，h1.section-header:before {位置:绝对；宽度:100px；高度:2px；背景:灰色；左:50%；变换:translateX(-50%);内容: '';底部:0}h1.section-header:before {高度:4px；宽度:40px；背景:蓝色；z-索引:3；}.section-cols {显示:网格；网格模板列:重复(2，1fr)；间隙:25px；}.section-cols >div {背景:灰色；高度:200px；//仅用于演示文本对齐:居中}
<h1 class="section-header">当日精选博客</h1><section class="section-cols"><div class="col-left">左列</div><div class="col-right">右列</div></节><h1 class="section-header">我在做什么</h1><section class="section-cols"><div class="col-left">左列</div><div class="col-right">右列</div></节>
I am trying to make two corners of the element align so that they are exactly on top of the corners of the other element.
In other words, I am looking to match the corners of the element with the corners of another element.
This is the code:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
display: flex;
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
max-width: 100%;
}
.square {
position: relative;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
width: 460px;
max-width: 100% !important;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-image1 img{
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details{
padding: 20px 30px 30px;
}
.square1 .square-details1{
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
@media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
@media screen and (max-width: 480px) {
.square{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
@media screen and (max-width: 480px) {
.square .square-image img{
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
justify-content: center;
position: relative;
margin-top: 0;
margin-bottom: 0;
width: 460px;
max-width: 100% !important;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 480px) {
.square1{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
@media screen and (max-width: 480px) {
.square1 .square-image1 img{
height: 230px !important;
border: 5px solid #555;
}
}
<div class="row1">
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">Sample Text</h3>
<p0>More text goes here</p0>
<div><a href="#" target="_" class="button56">Read More</a></div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">Sample Text</h3>
<p0>sample text goes here</p0>
<div><a href="#" target="_" class="button56">Read More</a></div>
</div>
</div>
</div>
</div>
So when you run the above code, open it on a new page, it will look something like this:
This is what it will look when you open the above output in a new page
enter image description here
However, the problem is that I have the above code embedded in a website and so on my end the output is looking like this:
This is what the output looks like on my end
enter image description here
I would like the corners of this element to match with the corners of the bottom element, which is the WHAT I AM WORKING ON two boxes.
Expected Output
enter image description here
I want the corners that are circled in red to exactly be where the arrow points at. The corners that are circled in red should be right on top of the corners of the bottom element. In other words, I would just like the corners that are circled in red to exactly be where the arrow points at.
The cards should be shifted from their place to have the corners meet up with the corners of the bottom element. I just don't want the width of the blog cards to be extended so that the corners meet up. I want the whole blog card to move from its position so that the corners can meet up as shown in the expected output. This will create some space in between of the blog cards since both of the blog cards would be moved from their position, which I am fine with.
Incase you would require the CSS of the bottom element to know its margin/alignment:
.master {
display: flex;
}
.master div {
width: 98.6%;
}
@media all and (max-width: 500px) {
.master div {
width: 99.9%;
}
}
@media all and (max-width: 500px) {
.master {flex-flow: wrap;}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
.skill-bars{
padding: 25px 30px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
@media all and (max-width: 500px) {
.skill-bars{
margin-bottom: 15px;
}
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span18{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span18{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
}
/* SET THE ANIMATED CLASS TO GET IT TO ANIMATE */
.bar .progress-line span18.animated{
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18{
width: 84%;
}
.bar .progress-line.css span18{
width: 76%;
}
.bar .progress-line.jquery span18{
width: 91%;
}
.bar .progress-line.python span18{
width: 59%;
}
.bar .progress-line.mysql span18{
width: 70%;
}
/* ADDED ANIMATED HERE SO ANIMATES ONLY WHEN IN THE VIEWPORT */
.progress-line span18.animated::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18.animated::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span18::after{
content: "84%";
}
.progress-line.css span18::after{
content: "76%";
}
.progress-line.jquery span18::after{
content: "91%";
}
.progress-line.python span18::after{
content: "59%";
}
.progress-line.mysql span18::after{
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1 {
padding: 25px 30px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
@media all and (max-width: 500px) {
.skill-bars1{
padding: 25px 30px;
}
}
.skill-bars1 .bar1 {
margin: 20px 0;
}
.skill-bars1 .bar1:first-child {
margin-top: 0px;
}
.skill-bars1 .bar1 .info1 {
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1 {
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
@keyframes animate {
100% {
transform: scaleX(1);
}
}
.bar1 .progress-line1 span19 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
}
.bar1 .progress-line1 span19.animated1{
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar1 .progress-line1.html1 span19 {
width: 61%;
}
.bar1 .progress-line1.css1 span19 {
width: 50%;
}
.bar1 .progress-line1.jquery1 span19 {
width: 68%;
}
.bar1 .progress-line1.python1 span19 {
width: 82%;
}
.bar1 .progress-line1.mysql1 span19 {
width: 98%;
}
.progress-line1 span19.animated::before {
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19.animated::after {
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100% {
opacity: 1;
}
}
.progress-line1.html1 span19::after {
content: "61%";
}
.progress-line1.css1 span19::after {
content: "50%";
}
.progress-line1.jquery1 span19::after {
content: "68%";
}
.progress-line1.python1 span19::after {
content: "82%";
}
.progress-line1.mysql1 span19::after {
content: "98%";
}
HTML:
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<div class="master">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Youtube Channel (Java Tutorials)</span18>
</div>
<div class="progress-line css">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>C++</span18>
</div>
<div class="progress-line jquery">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="progress-line python">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="progress-line mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="progress-line1 html1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Linkedin Learning</span19>
</div>
<div class="progress-line1 css1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="progress-line1 jquery1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="progress-line1 python1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Reading "Cracking The Coding Interview" 😊</span19>
</div>
<div class="progress-line1 mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
What I tried
I tried adding a master element just like it is shown in the CSS of the bottom element and added the same properties but it still did not work.
Any suggestions would greatly help!
Update
enter image description here
This is the output I am getting, the corners still do not match the corners of the bottom element.
解决方案
One solution from CSS Grid.
.container {
width: 950px;
margin: 0 auto;
}
h1.section-header {
font-family: arial, 'sans-serif';
font-size: 25px;
color: #333;
text-align: center;
position: relative;
padding-bottom: 15px
}
h1.section-header:after,
h1.section-header:before {
position: absolute;
width: 100px;
height: 2px;
background: gray;
left: 50%;
transform: translateX(-50%);
content: '';
bottom: 0
}
h1.section-header:before {
height: 4px;
width: 40px;
background: blue;
z-index: 3;
}
.section-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.section-cols > div {
background: gray;
height: 200px; // only for demostration
text-align: center
}
<div class="container">
<h1 class="section-header">Featured blogs of the day</h1>
<section class="section-cols">
<div class="col-left">Column Left</div>
<div class="col-right">Column Right</div>
</section>
<h1 class="section-header">What I am working on</h1>
<section class="section-cols">
<div class="col-left">Column Left</div>
<div class="col-right">Column Right</div>
</section>
</div>
这篇关于元素对齐有点偏离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-05 15:28