html/css中的間距問題

Question

我有以下代碼：

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { margin-top: 0; margin-bottom: 0; } .container1 { display: flex; gap: 360px; /* This seems to cause the problem */ width: 100%; margin: 0 auto; padding: 20px; justify-content: center; overflow: hidden; } .square { position: relative; 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; } .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 { position: relative; 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; } @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; } }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <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">“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 class="square1"> <div class="square-image1"> <img src="assets/img/Blog2.png"> </div> <div class="square-details1"> <h3 class="h11">My Career Advice To You: Take These Steps...</h3> <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0> <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </section>

我將上面的代碼嵌入到網站中，等等，在頁面上縮小 50%時，輸出看起來像這樣

這正是我想要的，但是當我放大到 100% 時，我的輸出看起來像這樣：

看看端角是如何不再對齊的？ 如果仍然看不到問題，請參考下圖：

看看用橙色圈起來的角是如何不再對齊的？ 我該如何解決？ 我知道gap: 360px是導致問題的原因，但我將如何更改它，以便無論用戶縮小到什么程度，角落的對齊方式都不會改變？ 有什么建議么？

Answer 1

而不是使用gap屬性使用margin-left和margin-right作為卡片之間的空間，並檢查下面的卡片填充以在同一行對齊角落

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { margin-top: 0; margin-bottom: 0; } .container1 { display: flex; width: 100%; flex-wrap: wrap; } .square { position: relative; 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; margin-right: 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); } .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: auto; object-fit: cover; } .square1 .square-image1 img { width: 100%; height: auto; object-fit: cover; } .square1 .square-image1, .square .square-image{ border-top-left-radius: 4px; border-top-right-radius: 4px; border: 5px solid #555; height: 220px; overflow:hidden; } .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 { position: relative; 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; margin-right: auto; } @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; } }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <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">“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 class="square1"> <div class="square-image1"> <img src="assets/img/Blog2.png"> </div> <div class="square-details1"> <h3 class="h11">My Career Advice To You: Take These Steps...</h3> <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0> <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </section>

現在您可以使用媒體查詢調整容器寬度以根據屏幕尺寸進行調整以獲得如下卡片的確切結果。

還修復了卡片問題中溢出的圖像