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>

现在您可以使用媒体查询调整容器宽度以根据屏幕尺寸进行调整以获得如下卡片的确切结果。

还修复了卡片问题中溢出的图像