html/css 中的對齊修復

Question

我有以下代碼：

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { margin-top: 0; margin-bottom: 0; } .container1 { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px; overflow: hidden; } .square { margin-top: 0; margin-bottom: 0; max-width: 460px; 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; margin-left: auto; } .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); } .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; } .square .square-details { 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; } @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; } } /* iframe css*/ .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .resume .resume-title { font-size: 26px; font-weight: 700; margin-top: 20px; margin-bottom: 20px; color: #050d18; } .resume .resume-item { position: relative; text-align: center; } .add { padding: 0; } .iframe { height: 1070px; margin-left: auto; margin-right: auto; width: 80%; } @media all and (max-width: 500px) { .embed-responsive { height: auto; } .iframe { height: 130vw; } }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <div class="container1"> <div class="square"> <div class="square-image"> <img src="assets/img/Blog1.png"> </div> <div class="square-details"> <h3 class="h11">“Chances Of My Uni/College Admission?”</h3> <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0> <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div> </div> </div> </div> </section> <section id="resume" class="resume"> <div class="container"> <div class="section-title"> <h2>IFrame </h2> </div> <div class="resume-item"> <iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe> </div> </div> </section>

我希望博客卡片的角落在 iFrame 的角落下完美對齊。 博客卡片的第一個角應該在 iFrame 的第一個角的正下方。

---

預期產出

預期產出

我將如何修改 CSS 使其輸出如上圖所示？ 在square上添加margin-left: auto不起作用。 任何建議都會有很大幫助！ 非常感謝！

Answer 1

我的建議是從.container1刪除網格和填充，將 iframe 向左對齊，並將兩個左邊距設置為 10%。

由於 iframe 是width:80% ，每邊 10% 將它居中。 頂部元素上的匹配邊距將對齊兩個元素的左邊緣。

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; 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; margin-left: 10%; } .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); } .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; } .square .square-details { 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; } .iframe { height: 1070px; margin-left: 10%; width: 80%; }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <div class="container1"> <div class="square"> <div class="square-image"> <img src="assets/img/Blog1.png"> </div> <div class="square-details"> <h3 class="h11">“Chances Of My Uni/College Admission?”</h3> <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0> <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div> </div> </div> </div> </section> <section id="resume" class="resume"> <div class="container"> <div class="section-title"> <h2>IFrame </h2> </div> <div class="resume-item"> <iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe> </div> </div> </section>