元素对齐有点偏离 [英] Element Alignment A Bit Off

问题描述

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

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

这是代码:

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