元素对齐有点偏离

Question

我试图使元素的两个角对齐，使它们正好位于另一个元素的角的顶部。

换句话说，我希望将元素的角与另一个元素的角相匹配。

这是代码：

@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>

所以当你运行上面的代码，在一个新的页面上打开它时，它会看起来像这样：

这就是当你在新页面中打开上面的输出时的样子

在此处输入图像描述

然而，问题是我在一个网站上嵌入了上面的代码，所以在我的一端，输出看起来是这样的：

这就是我端的输出

在此处输入图像描述

我希望这个元素的角与底部元素的角相匹配，即WHAT I AM WORKING ON两个框。

预期输出

在此处输入图像描述

我希望red中圈出的角正好在箭头指向的位置。用红色圈出的边角应该正好在底部元素的角的顶部。换句话说，我只希望red中圈出的角正好位于箭头指向的位置。

牌应该从它们的位置移动，使角与底部元素的角相遇。我只是不希望博客卡的宽度被延长，这样角落就会相接。我希望整个博客卡从它的位置移动，这样角落可以在预期的输出中相遇。这将在博客卡之间创建一些空间，因为两个博客卡都会从它们的位置移动，我对此很满意

如果你需要底部元素的CSS来知道它的边距/对齐方式：

.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" &#128522</span19>
</div>
<div class="progress-line1 mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

我尝试了什么

我尝试添加一个master元素，就像底部元素的CSS中所示的那样，并添加了相同的属性，但仍然不起作用。

任何建议都将大有帮助！

更新

在此处输入图像描述

这是我得到的输出，角仍然与底部元素的角不匹配。

Answer 1

此页面的框大小设置是什么？我会尝试的第一件事是框大小：边框框；如果你还没有

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

CSS网格中的一个解决方案。

.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>