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

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

这是代码:

所以当您运行上面的代码时，在一个新页面上打开它，它将如下所示:

这是在新页面中打开上述输出时的外观

在此处输入图像说明

但是，问题是我将上面的代码嵌入到一个网站中，以此类推，输出如下所示:

这是在我的一端的输出

在此处输入图像说明

我希望此元素的角与底部元素的角匹配，底部元素是两个框。

预期输出

在此处输入图像说明

我希望圈出的角正好是箭头所指向的地方。用红色圈出的角应该在底部元素的角的正上方。换句话说，我只希望圈出的角正好是箭头指向的地方。

卡应该从他们的位置转移，使角与底部元素的角相遇。我只是不想博客卡的宽度被延长，以至于角都碰到了。我希望整个博客卡从它的位置移动，以便角落可以满足在预期的输出显示。这将在博客卡之间创建一些空间，因为两个博客卡都将从它们的位置移动，我对此很满意。

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

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

HTML:

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

我尝试的

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

任何建议都大有帮助！

更新

在此处输入图像说明

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

---

顺晟科技：

来自CSS网格的一个解决方案。

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

https://developer.mozilla.org/en-美国/docs/web/css/box-sizing